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)