Christopher Finke

Inline Preview is a plugin for WordPress that adds a live preview of the current post next to the post editor instead of opening the preview in a new tab.
Problem: When creating a post in WordPress, previewing your post in a separate tab can be slow and/or complicated.
Solution: Show the preview right next to the editor.
It’s just an idea I’m playing with for streamlining the post creation process, and if it feels familiar, it’s probably because it is: through version 2.1, WordPress contained a preview iframe at the bottom of the post editing screen, but this is a more elegant implementation.

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).

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)

KayzArt Live Code Editor

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

Inline Preview vs KayzArt Live Code Editor