Modifiez votre site headless… directement dans WordPress.
Okno affiche votre vrai front (Next.js, Astro, React…) dans WordPress. On clique sur un texte, on le modifie, on voit le résultat en direct. Vos champs ACF restent la source de vérité.
Gratuit et open source · GPL · WordPress 6.0+ · ACF
Architecture intérieure
Des lieux pensés pour ceux qui les vivent
Nous dessinons des intérieurs sobres et durables, du premier croquis à la livraison.
Voir nos projetsConception
Suivi de chantier
Mobilier sur mesure
« Ils ont compris notre façon de vivre avant nous. »
Le headless a donné aux développeurs un front moderne, mais a retiré aux rédacteurs le « ce que je vois ».
Sans Okno
- 1Remplir un formulaire à l’aveugle
- 2Attendre le build
- 3Découvrir le résultat en ligne
- 4Recommencer
Avec Okno
- 1Cliquer sur le texte, sur le vrai site
- 2Taper : l’aperçu suit en direct
- 3Enregistrer, publier. C’est en ligne.
Une fenêtre sur le vrai site.
« Okno » veut dire fenêtre en polonais, tchèque et russe. L'éditeur charge votre front dans une iframe, le bridge lui répond.
wp-admin
Éditeur Okno
Pages, Structure, Historique. Le panneau de champs à droite.
origine vérifiée
iframe
Votre site, tel quel
okno-bridge.js repère les data-wp-field, les signale à l'éditeur, applique la frappe en direct.
nonce + droits
WordPress
Vos champs ACF
Enregistrer écrit dans ACF. Publier lance votre déploiement.
Compatible avec votre stack
- Next.js
- Astro
- React
- Remix
- Vite
- Nuxt
- SvelteKit
- HTML
Trois étapes. Votre stack ne bouge pas.
- 1
Installez le plugin
Le zip de la dernière version, dans Extensions › Ajouter. WordPress 6.0+, PHP 7.4+, ACF gratuit ou Pro.
- 2
Ajoutez le bridge
Une ligne en React. Un script dans le <head> pour Astro, Nuxt, SvelteKit ou HTML.
- 3
Annotez vos éléments
data-wp-field sur chaque élément modifiable, avec le nom du champ ACF. C’est tout.
npm install @pixelersagency/okno-bridge Ou laissez votre agent de code s'en charger.
Claude Code, Cursor, Codex : donnez-lui les instructions d'Okno, il ajoute le bridge et annote le site en suivant le contrat d'intégration.
› prompt
Intègre Okno (éditeur visuel pour WordPress headless) à ce projet. Lis d'abord le contrat d'intégration : https://raw.githubusercontent.com/pixelersagency/okno/HEAD/plugin/docs/agent-instructions.md Puis : installe le bridge dans le layout (composant OknoBridge en React, script okno-bridge.js ailleurs), avec l'adresse de mon WordPress en wpOrigin, et annote chaque contenu issu d'ACF avec data-wp-post et data-wp-field, en respectant toutes les règles du contrat. Termine par la liste des champs annotés.
Les questions qu'on nous pose sur Okno.
Une autre question ?
Je réponds vite.
01 Faut-il que mon site soit en React ?
Non. React a un composant d’une ligne, mais tout site qui sort du HTML fonctionne : Astro, Nuxt, SvelteKit ou HTML statique, avec un simple script.
02 Mes contenus sont-ils stockés ailleurs ?
Non. Okno lit et écrit les champs ACF que vous avez déjà. Pas de nouveau modèle de contenu, pas de base à part, pas de service tiers.
03 Est-ce gratuit ?
Oui. Okno est open source sous licence GPL (2.0 ou ultérieure). Le code est sur GitHub.
04 Quel impact sur les performances ?
Quasi nul pour vos visiteurs : le bridge (environ 10 Ko, sans dépendance) ne se charge que dans l’éditeur. Hors éditeur, le site ne charge qu’un test de quelques octets.
05 L’interface est-elle en anglais ?
Elle est en français pour l’instant. La traduction anglaise est prévue.
06 Que se passe-t-il si je désinstalle ?
Vos contenus restent intacts dans vos champs ACF. Les attributs data-wp-field restent dans votre code sans effet : vous pouvez les laisser ou les retirer.
Vous préférez qu'on s'en occupe ?
Okno est fait par Pixelers. On l'intègre sur votre site headless : annotations, mise en ligne, formation de vos équipes.
Parler de votre projet