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