Title: KayzArt Live Code Editor Author: K's Art Office Published: April 7, 2026 Last modified: April 7, 2026 --- Search plugins ![](https://s.w.org/plugins/geopattern-icon/kayzart-live-code-editor.svg) # KayzArt Live Code Editor By [K’s Art Office](https://profiles.wordpress.org/ksartoffice/) [Download](https://downloads.wordpress.org/plugin/kayzart-live-code-editor.1.3.6.zip) * [Details](https://wordpress.org/plugins/kayzart-live-code-editor/#description) * [Reviews](https://wordpress.org/plugins/kayzart-live-code-editor/#reviews) * [Installation](https://wordpress.org/plugins/kayzart-live-code-editor/#installation) * [Development](https://wordpress.org/plugins/kayzart-live-code-editor/#developers) [Support](https://wordpress.org/support/plugin/kayzart-live-code-editor/) ## Description 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) ## Screenshots * [[ * Editor screen. * [[ * Tailwind CSS mode. ## Installation 1. Upload the plugin folder to /wp-content/plugins/kayzart-live-code-editor/. 2. Activate KayzArt Live Code Editor through the Plugins screen. 3. Go to KayzArt in the admin menu and create a new KayzArt item. ## FAQ ### Who can edit KayzArt posts? Users who can edit the post can use the editor. JavaScript, external scripts/styles, shadow DOM, external embedding, and single-page settings require the unfiltered_html capability. ### Does KayzArt contact external servers by default? No. External requests are disabled by default. Requests are made only when you explicitly configure external HTTPS script/style URLs in KayzArt settings. ### How do I embed a page created with KayzArt? Enable external embedding in KayzArt settings, then use [kayzart post_id=”123″] with the post ID of the page you created in KayzArt. For shortcode execution inside the embedded content, add allowed tags in KayzArt settings (one tag per line). Non- allowlisted tags remain plain text. ### Can I disable the single page view? Yes. Enable external embedding and turn on “Do not publish as single page.” Disabled single pages are marked noindex and excluded from search/archives, and the single- page request is redirected (or can be forced to 404 via the kayzart_single_page_redirect filter). ### Can I switch between Normal and Tailwind modes? The setup wizard lets you choose Normal or Tailwind. The choice is locked per KayzArt post. ### Which Tailwind CSS version is supported? Tailwind mode supports Tailwind CSS v4. ### How does template mode work? Each KayzArt post can use Default, Standalone, or Theme template mode. Default follows KayzArt > Settings > Default template mode. If Theme mode does not expose the_content in your theme, KayzArt preview prompts to switch to Standalone. ### Can I change the KayzArt URL slug? Yes. Go to KayzArt > Settings and update the KayzArt slug. ### Can I set a default template mode for new previews? Yes. Go to KayzArt > Settings and set the Default template mode (Standalone/Theme). ### Does the plugin delete data on uninstall? By default, KayzArt posts are kept when the plugin is uninstalled. You can enable data removal from the KayzArt > Settings screen. ### Where is the code stored? HTML is stored in the post content. CSS/JS and other settings are stored in post meta. ### Where is the development repository and how do I build the plugin? Development repository: https://github.com/ksartoffice/kayzart-live-code-editor Generated files in the distributed plugin: * assets/dist/main.js * assets/dist/ style.css Source files and build configuration in this repository: * src/admin/main.ts and src/admin/style.css (plus related source files under src/admin/) * package.json, package-lock.json, vite.config.ts, tsconfig.json Build commands: 1. npm install 2. composer install 3. npm run build 4. npm run plugin-zip ## Reviews There are no reviews for this plugin. ## Contributors & Developers “KayzArt Live Code Editor” is open source software. The following people have contributed to this plugin. Contributors * [ K’s Art Office ](https://profiles.wordpress.org/ksartoffice/) [Translate “KayzArt Live Code Editor” into your language.](https://translate.wordpress.org/projects/wp-plugins/kayzart-live-code-editor) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/kayzart-live-code-editor/), check out the [SVN repository](https://plugins.svn.wordpress.org/kayzart-live-code-editor/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/kayzart-live-code-editor/) by [RSS](https://plugins.trac.wordpress.org/log/kayzart-live-code-editor/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.3.6 * Update: Minor changes. #### 1.3.5 * Docs: Add screenshots section. #### 1.3.4 * Update: Bump TailwindPHP fork dependency to v1.3.0.2. #### 1.3.3 * Improve: Add resizable settings panel with width persistence. * Add: Introduce preview override action events. #### 1.3.2 * Security: Security update and hardening improvements. #### 1.3.1 * Fix: Bug fixes and stability improvements. #### 1.3.0 * Introduce CodeMirror 6 editor runtime and remove legacy bundled loader assets. #### 1.2.1 * Fix: Minor internal code cleanup #### 1.2.0 * Add JavaScript execution mode selector (Classic script / Module) in the JavaScript tab. * Add ES Module runtime contract support with context injection (`root`, `document`,` host`, `onCleanup`). #### 1.1.3 * Fix: Bug fixes and stability improvements. #### 1.1.2 * Security: Security update and hardening improvements. #### 1.1.1 * Security: Implemented security-related improvements and hardening updates. #### 1.1.0 * Add allowlist settings for shortcode execution in external embeds. * Other: Internal improvements and maintenance updates. #### 1.0.1 * Initial release. ## Meta * Version **1.3.6** * Last updated **4 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.6 or higher ** * Tested up to **6.9.4** * PHP version ** 8.2 or higher ** * Tags * [code editor](https://wordpress.org/plugins/tags/code-editor/)[Codemirror](https://wordpress.org/plugins/tags/codemirror/) [live preview](https://wordpress.org/plugins/tags/live-preview/)[shortcode](https://wordpress.org/plugins/tags/shortcode/) [tailwind](https://wordpress.org/plugins/tags/tailwind/) * [Advanced View](https://wordpress.org/plugins/kayzart-live-code-editor/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/kayzart-live-code-editor/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/kayzart-live-code-editor/reviews/) ## Contributors * [ K’s Art Office ](https://profiles.wordpress.org/ksartoffice/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/kayzart-live-code-editor/)