∞ forever components

Editor Workflows

Markdown Split

A focused Markdown control flips between readable source and rendered preview, with one large two-state selector designed to stay legible inside a 300px canvas tile.

csslight complexitysubtle motionclickmobile-readyaccessible

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Markdown-capable text inputs, documentation tools, CMS controls, note apps and editor toolbars that need a compact source/preview mode switch.

When not to

A full document editor, working Markdown parser or side-by-side comparison is required — this component demonstrates one compact mode control.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Replace the two lines in both source and preview states, then rename the two tab labels if needed. Adjust only the state dwell times in schedule(); re-theme through --pro-* tokens and keep the compact one-control composition.

Safe to edit

  • theme tokens (:root --pro-* values)
  • Markdown and rendered copy inside .mds-source and .mds-preview
  • Markdown/Preview tab labels
  • two-state dwell times in next()

Keep intact

  • :root --pro-* token block (shared professional theming API)
  • role=button, tabindex and descriptive aria-label on .mds-stage
  • IIFE wrapper, reduced-motion preview state and visibilitychange timer pause
  • theme hook (?theme bootstrap plus forever:theme listener)
  • unique mds- class namespace

Known limitations

  • Source and rendered output are authored together; no Markdown parser runs
  • The component supports two compact views rather than a full split-pane editor
  • Light re-theme uses the --pro-* block; catalog bg/accent describe the dark default

markdowneditorlive-previewsplit-viewwritingcontentdocumentationproduct-ui

More Editor Workflows components

  • Comment ComposerA single reply control types a useful comment, presses its send action and resolves to a clear sent state without shrinking into a miniature discussion…
  • Mention PickerA compact mention field types @ma, reveals one large teammate result, highlights it and resolves into a clear @maya token sized for the public canvas.
  • Autosave DraftOne document-status control moves from edited to saving to saved, morphing a neutral dot into a spinner and confirmation mark at clear 300px-tile scale.
  • Suggested EditsOne focused inline revision replaces a vague phrase with an exact result, then demonstrates both accept and reject outcomes with large controls.
  • Focus WritingA compact focus-mode control turns on, then moves a crisp reading spotlight across three short lines while surrounding copy recedes.