KayzArt Live Code Editor - Live HTML/CSS/JS Editor with Tailwind CSS v4 support.

Christopher Finke

Inline Preview

Inline Preview adds a preview of the post you're writing next to the editor when you click Preview (instead of opening it in a new tab).

Abhishek Sinha

Category Excluder from Theme Customizer

Administrator can easily exclude the posts from specific category/categories via WordPress live preview ( Theme Customizer )

Sajjad Hossain Sagor

Mini Live Preview URL

Preview Any URL as Quick View Modal when hover over.

kolakube

Customizer Refresh

Add a button that refreshes the live preview in the WordPress Customizer.

Muhammad Ijaz Anjum

Dashboard Plus

Everything you need to customize your WordPress Dashboard , Login Page.

K's Art Office

KayzArt Live Code Editor provides a dedicated editor for building HTML, CSS, and JavaScript snippets with a live preview. It adds a “KayzArt” custom post type, opens new KayzArt posts in the editor, and adds an “Edit with KayzArt” button to the standard editor.
Features: 
* Custom KayzArt post type and dedicated editor 
* CodeMirror 6 editor with HTML/CSS/JS tabs and live iframe preview 
* JavaScript ES Module support with execution type switch (Classic / Module) 
* Setup wizard (Normal/Tailwind/Import JSON) with per-post mode lock 
* Tailwind mode with on-demand Tailwind CSS v4 compilation 
* Import/export JSON projects 
* Per-post template mode control: Default/Standalone/Theme 
* External scripts/styles (https only), live edit highlight, real-time DOM selection, and optional Shadow DOM isolation 
* External embedding (enable in settings): [kayzart post_id=”123″] 
* Allowlist for shortcode execution inside external embeds (one shortcode tag per line) 
* Optional single-page disable for external-embed output
External connections and privacy: 
* By default, KayzArt does not load external scripts or styles and does not send telemetry. 
* External requests happen only when an authorized user explicitly adds external HTTPS URLs in KayzArt settings. 
* Added external resources are requested both in preview and on front-end output where the KayzArt content is rendered. 
* Add only trusted URLs.
Development repository and build: 
* Source repository: https://github.com/ksartoffice/kayzart-live-code-editor 
* Generated files used by WordPress: assets/dist/main.js and assets/dist/style.css 
* Source files for generated assets: src/admin/main.ts, src/admin/style.css, and related files under src/admin/ 
* Build configuration files: package.json, package-lock.json, vite.config.ts, tsconfig.json 
* Build steps: 
1. npm install 
2. composer install 
3. npm run build 
4. npm run plugin-zip
<h3>Credits</h3>
This plugin bundles third-party libraries: 
* CodeMirror – MIT License – https://github.com/codemirror 
* Emmet CodeMirror 6 Plugin – MIT License – https://github.com/emmetio/codemirror6-plugin 
* TailwindPHP (fork) – MIT License – https://github.com/ksartoffice/tailwindphp (upstream: https://github.com/dnnsjsk/tailwindphp)

Alternatives to KayzArt Live Code Editor

Top alternatives