PlantUML can run entirely in the browser thanks to TeaVM and Viz.js. This page lists the available editor front-ends shipped with the project. Each one is a self-contained HTML page that can serve as a starting point for JavaScript developers who want to build their own PlantUML-powered tools.
Pick the one that best fits your needs, open its source, and start hacking!
| Editor | Description | Pros / Cons |
|---|---|---|
|
Playground
Full
|
A polished, split-pane editor with live preview, resizable panels,
copy-to-clipboard and download buttons.
Uses an external CSS file and a dedicated main.js script.
|
Rich UI with smooth resize interaction Clipboard & save-to-file support Clean design, ready for production use Larger codebase – more files to understand Relies on external CSS & JS assets |
|
Basic
Minimal
|
A bare-bones, single-file editor. Just a <textarea>
and a preview <div> wired together with a few lines
of inline JavaScript. No external dependencies beyond the PlantUML engine itself.
|
Extremely simple – easy to read and understand Single self-contained HTML file Perfect skeleton for quick experiments No styling – raw browser defaults No copy/save/export features Not suitable as-is for end users |
|
Basic Dark
Minimal
|
Same minimal editor as Basic, but with a dark theme baked in.
Demonstrates how to use the optional {dark: true} options
object in window.plantuml.render(lines, id, options) to
switch the PlantUML rendering engine to dark mode.
Diagram colors are automatically adjusted by the engine.
|
Shows how to pass rendering options from JS Dark mode handled by the engine, not just CSS Single self-contained HTML file No copy/save/export features Not suitable as-is for end users |
|
GitHub PoC
PoC
|
Proof of concept showing how GitHub could render
```plantuml fenced code blocks in Markdown.
Documents the sandbox architecture (postMessage-based
iframe isolation), provides reference code for both the iframe renderer
and the parent-side Markdown scanner, and renders two live example
diagrams using a serialized render queue.
See GITHUB_INTEGRATION.md for full documentation.
|
Self-contained – single HTML file, no extra assets Live rendering with the real PlantUML JS engine Low memory – single engine instance shared across diagrams Includes full architecture documentation & reference code Sequential rendering – diagrams render one at a time Blocks the main thread during rendering |
Variant of the GitHub integration PoC that uses
hidden iframes as rendering workers.
Each ```plantuml block gets its own off-screen iframe
with a dedicated engine instance, enabling fully parallel rendering.
The main thread stays responsive throughout.
Worker iframes are destroyed after rendering.
|
Parallel rendering – all diagrams render simultaneously Non-blocking – main thread stays free during rendering Worker iframes are auto-destroyed after rendering Same postMessage architecture GitHub already uses for Mermaid Higher memory – one engine instance per diagram Slightly longer startup per diagram (iframe + engine load) |
We plan to add more editors over time – split views, dark-mode themes, Monaco-based editors, collaborative pads, and more. Each new entry will be another ready-made starting point for the community.
Contributions are welcome.
If you have built an interesting editor front-end, feel free to submit it.
Just drop a new index-*.html file in the
src/main/resources/teavm/ directory and open a pull request.