KayzArt Live Code Editor

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

Credits

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)