language/markdown
An Online Markdown Editor with a Live GFM Preview
Type GitHub-flavored Markdown on one side and watch it render on the other — tables, task lists, code blocks, Mermaid diagrams and math, all previewed live as you write.
# Release notes
- [x] Ship the editor
- [ ] Write the docs
| Feature | Status |
| ------- | ------ |
| Preview | live |
```js
export const version = '7.6';
```01 platform
What a real Markdown editor adds to a text box
Markdown is easy to write in anything. What a proper editor adds is the other half — seeing the rendered result as you type, in the exact flavor GitHub and the rest of the ecosystem use.
-
A live preview, side by side
The rendered HTML sits beside the source and updates as you type, so a table that is one pipe short or a list that did not nest is obvious immediately, not after you paste it somewhere.
-
GitHub-flavored, not a dialect
Tables, task lists, strikethrough, fenced code and autolinks all behave the way they do in a GitHub README, so what you write here is what renders there.
-
The VS Code engine underneath
Monaco brings multi-cursor, find-and-replace across files and the command palette to your prose, which is what makes editing a long document bearable.
-
Private and installable
The document lives in your browser, never on a server, and XCODX installs as a PWA — so your notes keep working offline and stay yours.
02 deep dive
Write on the left, rendered on the right
The preview is the point: Markdown only tells you it worked when you can see it, and here you can see it as you go.
It renders on every keystroke. Type a heading and it appears formatted; add a table row and the table grows. There is no compile step and no refresh — the preview is a reflection of the source, not a build of it.
Scrolling stays in step. The preview follows the source as you move through a long document, so the paragraph you are editing is the paragraph you are looking at.
It is the real output. The preview is the HTML your Markdown produces, so copying the rendered result into a page or an email carries the formatting you saw, not an approximation of it.
- updates
- as you type
- layout
- side-by-side
- output
- HTML
- flavor
- GFM
## Today
- [x] wrote the intro
- [ ] review the PR
> A blockquote renders as a quote,
> not as text with a `>` in front.03 features
What this Markdown editor supports
Everything below is on the moment you open the Markdown editor, which starts as a research notebook mixing prose, code, diagrams and math.
-
Tables and task lists
GitHub-flavored tables with alignment, and checkbox task lists that render as real checkboxes — the two extensions a plain Markdown parser most often gets wrong.
-
Fenced code, highlighted
Code blocks are syntax-highlighted by language, the same way they render in a repository, so a snippet in your docs looks like code rather than gray text.
-
Mermaid diagrams
A ```mermaid fence renders a flowchart or sequence diagram inline, so a document can carry a picture that stays in sync with the words around it.
-
Math with KaTeX
Inline and block math render through KaTeX, so
$e^{i\pi}+1=0$becomes a typeset equation — enough for notes, papers and problem sets. -
Multi-file projects
Keep a folder of Markdown files with images and assets beside them, switch between tabs, and commit the lot with Git — a notebook, not a single scratch pad.
-
Export as you need
The source is a plain .md file and the preview is real HTML, so the document moves into a repo, a static site or a doc tool without a proprietary format in the way.
04 deep dive
Mermaid, math and code inside your Markdown
The parts that separate a notebook from a text file are the embedded ones — a diagram, an equation, a highlighted snippet — and they render here without a plugin to wire up.
Diagrams live in a fence. Open a ```mermaid block, write the diagram as text, and it renders as SVG in the preview — the same Mermaid the diagram editor uses, embedded in your prose.
Math renders through KaTeX. Dollar-delimited TeX becomes typeset math, inline or as a block, which covers the notation most notes and papers reach for. This is KaTeX math, not a full LaTeX document compiler.
Code is highlighted by language. A fenced block tagged with its language is colored the way it would be in a repository, so a README's examples read as code and the language is obvious at a glance.
- diagrams
- ```mermaid fence
- math
- KaTeX, $…$
- code
- fenced, highlighted
- not
- full LaTeX docs
The mass–energy relation is $E = mc^2$.
```mermaid
flowchart LR
Idea --> Draft --> Review
```05 workflow
From a heading to a rendered README
No install, no build, no publish step to preview — the whole loop from an empty file to a document that renders like it will on GitHub.
- new project → Markdown
- created README.md · notebook starter
- add a | table | with rows
- preview: table rendered with alignment
- add a ```mermaid fence
- diagram rendered inline as SVG
- git commit -m "docs: getting started"
- [main a3f0b21] docs: getting started · 1 file
-
See it the way GitHub will
Because the preview is GitHub-flavored, the README you write here renders the same when you push it, with no surprises in the tables or task lists.
-
The same loop on a tablet
Rendering happens client-side, so an iPad previews Markdown the same way a laptop does, with nothing installed.
-
It is just a .md file
Export the project and the document is plain Markdown on disk — no lock-in, ready for a repo or a static-site generator.
06 ecosystem
Markdown beside the rest of the toolkit
Markdown is one of many things the editor renders — the same tab documents a project, compiles its code and previews the result, per file.
07 languages
What the editor renders alongside Markdown
A Markdown document sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
Markdown in the browser — common questions
Does the Markdown editor show a live preview?
Yes. The rendered result sits beside the source and updates as you type, with the two panes scrolling in step, so you always see how the document looks while you write rather than after you publish it.
Is this GitHub-flavored Markdown?
Yes. Tables, task lists, strikethrough, fenced code and autolinks follow GitHub-flavored Markdown, so a README written here renders the same way once you push it to a repository.
Can I use Mermaid diagrams and math in Markdown?
Yes. A ```mermaid fence renders a diagram inline as SVG, and dollar-delimited TeX renders as typeset math through KaTeX. Both work in the preview with no plugin to configure.
Does it render LaTeX documents?
It renders KaTeX math expressions inside Markdown, not full LaTeX documents. There is no TeX engine here compiling a .tex file to a PDF — the math support is for equations in your notes, papers and READMEs.
Can I keep several Markdown files in one project?
Yes. Projects are multi-file, so a folder of notes with images and assets beside them, tabs to switch between them, and Git to version them all work — it is a notebook rather than a single text box.
Do I need to install anything to edit Markdown?
No. The editor and the renderer run entirely in the browser, so there is no install and no build. It works offline once loaded as a PWA, and your documents stay in your browser.
Can I export the Markdown or its HTML?
Yes. The source is a plain .md file you can export in the project zip, and the preview is the real HTML the Markdown produces, so the document moves into a repo, a site or another tool without a proprietary format.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Markdown editor now
A rendered document on screen in under a minute — GitHub-flavored, previewed live, with no account wall and nothing to install.