Kayzart turns custom HTML, CSS, and JavaScript into a real, publishable WordPress landing page \u2014 rendered live as you edit, kept clean and independent from your active theme, with no page builder and no build tooling to set up.<\/p>\n\n
Write the page by hand, start from a template, drop in code from a designer, or paste what an AI tool gave you. The source doesn't matter \u2014 Kayzart is where that code becomes a page you can preview, keep editing, and ship in minutes, without a child theme and without fighting your theme's header, footer, and styles.<\/p>\n\n
Who this is for<\/strong>\nPeople comfortable with HTML\/CSS who want full control over the result \u2014 freelancers, agencies, and developers who need a clean landing page fast, without a child theme, a page builder, or a build pipeline. Non-developers can still tweak text, links, and images visually from the Elements panel.<\/p>\n\n What you can do<\/strong>\n* Edit everything live with a CodeMirror 6 editor and instant iframe preview\n* Click an element in the preview to jump to its code (real-time DOM selection)\n* Keep the page theme-independent in Standalone mode, or render inside your theme in Theme mode\n* Use plain CSS or TailwindCSS (auto-compiled) per page\n* Run modern JavaScript (Classic script or ES Module)\n* Bring a full HTML\/CSS\/JS page from anywhere and run it as-is\n* Duplicate an existing landing page as a draft from the page list\n* Restrict external embeds with an allowlist<\/p>\n\n Works great with<\/strong>\nBring HTML from anywhere \u2014 hand-written, a template, a designer, or an AI tool like ChatGPT, Claude, Gemini, or v0. Kayzart doesn't generate the code \u2014 it's where that code becomes a real, publishable WordPress page you can keep editing.<\/p>\n\n Development repository: https:\/\/github.com\/ksartoffice\/kayzart-live-code-editor<\/p>\n\n The admin editor bundle (assets\/dist\/) is compiled from the TypeScript\/React sources in src\/ with Vite. To reproduce the build from the repository: install dependencies with This plugin bundles third-party libraries:\n* CodeMirror - MIT License - https:\/\/github.com\/codemirror\n* Emmet CodeMirror 6 Plugin - MIT License - https:\/\/github.com\/emmetio\/codemirror6-plugin\n* js-beautify - MIT License - https:\/\/github.com\/beautify-web\/js-beautify\n* Lucide - ISC License - https:\/\/github.com\/lucide-icons\/lucide\n* parse5 - MIT License - https:\/\/github.com\/inikulin\/parse5\n* TailwindPHP - MIT License - https:\/\/github.com\/ksartoffice\/tailwindphp<\/p>\n\n\n Kayzart is a live HTML\/CSS\/JavaScript editor for WordPress. You build clean, theme-independent landing pages: write or paste your HTML, CSS, and JavaScript, watch the live preview render as you edit, and publish \u2014 without a page builder, a child theme, or a build pipeline. Use Standalone mode to keep the page free of your theme's header, footer, and styles, or Theme mode to render inside your theme.<\/p><\/dd>\n Create a landing page, then paste the HTML, CSS, and JavaScript into their tabs. You can also convert an existing WordPress page from the page list or edit screen; Kayzart keeps the existing post content as the initial HTML. If you have one complete HTML document, use the full HTML import feature to split it into the right fields. The live preview renders it immediately, and you can keep editing before you publish.<\/p><\/dd>\n Not yet in this free plugin \u2014 today Kayzart is the editor and runtime where you paste and refine AI-generated code. AI-assisted editing inside WordPress is on our roadmap. For now, generate your HTML\/CSS\/JS in ChatGPT, Claude, or Gemini, then paste it here to publish and keep editing.<\/p><\/dd>\n Basic familiarity with HTML\/CSS helps when fine-tuning, and Kayzart gives you full control when you want it. But you don't have to start from scratch \u2014 paste existing code (hand-written, a template, or AI output) and adjust from there, or edit text, links, and images visually from the Elements panel.<\/p><\/dd>\n Yes. You can place WordPress shortcodes directly in the HTML editor. They are not expanded inside the live preview iframe, but they are processed normally on the published page or front-end view.<\/p><\/dd>\n Yes. From the Pages list, choose Duplicate landing page for a Kayzart-managed page. Kayzart creates a new draft copy with the page content, Kayzart settings, featured image, and taxonomy terms carried over.<\/p><\/dd>\n Yes. Choose TailwindCSS mode when creating or converting a page and Kayzart compiles utility classes automatically. It uses TailwindCSS v4, so the latest utility syntax works out of the box.<\/p><\/dd>\n Standalone mode renders your landing page without the active theme's layout \u2014 the theme's header, footer, content template, styles, and scripts are not loaded, so your page isn't affected by theme CSS or JavaScript. Kayzart's own styles and scripts (and your page's CSS\/JS) are still loaded, so the editor runtime and your page behave as expected. Use it when you want a clean, theme-independent landing page.<\/p><\/dd>\n Theme mode renders your Kayzart content inside the active theme's template, so the page keeps your theme's header, footer, and styling.<\/p><\/dd>\n HTML is stored in the post content; CSS, JavaScript, Tailwind\/template modes, and other Kayzart settings are stored in post meta.<\/p><\/dd>\n\n<\/dl>\n\n\nnpm install<\/code> and composer install<\/code>, then run npm run build<\/code> to generate the bundled assets. npm run plugin-zip<\/code> produces the distributable package.<\/p>\n\nCredits<\/h3>\n\n
\n
\n
What is Kayzart and what can I build with it?<\/h3><\/dt>\n
I already have HTML\/CSS\/JS (hand-written, a template, or from an AI tool). How do I use it in WordPress?<\/h3><\/dt>\n
Can AI edit the page for me, right inside WordPress?<\/h3><\/dt>\n
Do I need to know how to code?<\/h3><\/dt>\n
Can I use shortcodes?<\/h3><\/dt>\n
Can I duplicate an existing landing page?<\/h3><\/dt>\n
Can I use TailwindCSS?<\/h3><\/dt>\n
What is Standalone mode?<\/h3><\/dt>\n
What is Theme mode?<\/h3><\/dt>\n
Where is the code stored?<\/h3><\/dt>\n
2.2.3<\/h4>\n\n
\n
2.2.2<\/h4>\n\n
\n
2.2.1<\/h4>\n\n
\n
2.2.0<\/h4>\n\n
\n
2.1.1<\/h4>\n\n
\n
2.1.0<\/h4>\n\n
\n
2.0.7<\/h4>\n\n
\n
2.0.6<\/h4>\n\n
\n
2.0.5<\/h4>\n\n
\n
2.0.4<\/h4>\n\n
\n
2.0.3<\/h4>\n\n
\n
2.0.2<\/h4>\n\n
\n
2.0.1<\/h4>\n\n
\n
2.0.0<\/h4>\n\n
\n
1.3.6<\/h4>\n\n
\n
1.3.5<\/h4>\n\n
\n
1.3.4<\/h4>\n\n
\n
1.3.3<\/h4>\n\n
\n
1.3.2<\/h4>\n\n
\n
1.3.1<\/h4>\n\n
\n
1.3.0<\/h4>\n\n
\n
1.2.1<\/h4>\n\n
\n
1.2.0<\/h4>\n\n
\n
root<\/code>, document<\/code>, host<\/code>, onCleanup<\/code>).<\/li>\n<\/ul>\n\n1.1.3<\/h4>\n\n
\n
1.1.2<\/h4>\n\n
\n
1.1.1<\/h4>\n\n
\n
1.1.0<\/h4>\n\n
\n
1.0.1<\/h4>\n\n
\n