+ +React Web Component

Article Writer
WYSIWYG Editor

A polished, Medium-inspired writing experience designed for modern content writers. Built to streamline drafting and editing, it delivers the core editorial workflow while staying flexible enough for brand-specific customization, custom integrations, and scalable content operations.

This editor brings together a clean writing canvas, structured block-based composition, fast inline formatting, and intuitive publishing controls in a single, high-quality interface. It supports rich content blocks including structured tables, embedded YouTube and Vimeo video previews, images, and code — all accessible from a slash-command menu. Crafted to help teams create professional, on-brand content with less friction and more focus on storytelling.

ReactWeb ComponentContent WritingCMS IntegrationTailwind CSS
Writing Canvas

A blank page that doesn't feel blank

The editor opens to a clean, distraction-free canvas. Authors set a cover image, author name, article title, and subtitle — then write. Placeholder text guides the experience without clutter.

  • Cover image upload
  • Inline author meta and read-time estimate
  • Inline Images
  • Large-format title and subtitle fields
  • Tag input for taxonomy and discovery
Article Writer editor header — blank canvas with placeholders
Block System

Every content type, one keystroke away

Type "/" at the start of any line to summon the block menu. Authors can insert headings, paragraphs, lists, quotes, images, code blocks, dividers, structured tables, and embedded video previews — without ever leaving the keyboard.

  • H1 · H2 · H3 headings
  • Bullet & numbered lists
  • Block quotes and dividers
  • Image and code block insertion
  • Structured tables with row & column controls
  • YouTube & Vimeo video embeds — paste a link or use the menu
Slash command menu showing block type options
Inline Formatting

Format precisely, without breaking flow

Select any text to reveal the bubble toolbar. Bold, italic, underline, strikethrough, inline code, link insertion, heading promotion, block-quote wrapping — and four color presets — all at a hover.

  • Bold, italic, underline, strikethrough
  • Inline code and hyperlink insertion
  • Heading & blockquote shortcuts
  • Brand-aligned color palette
Bubble toolbar showing formatting options on text selection
Publishing Controls

From draft to published in one click

The persistent toolbar keeps critical actions in reach — export to JSON, delete with confirmation, save as draft, and publish live. Autosave runs every 3 seconds behind the scenes.

Editor toolbar — Export, Save draft, Publish buttons

Export

JSON download

Delete

With confirmation

Save draft

Manual or auto

Publish

One-click live

What You Build

Editorial-quality output, out of the box

lyncore.lk/demo/article/articles/lyncore-software
A fully written article — LYNCORE Software — rendered in the Article Writer
Medium-inspired · Fully customisable · Drop-in React component

See it in action.
Write your first article now.

The live demo is fully functional — create, edit, and publish articles right in your browser. No login, no setup. Stored locally in your browser.

TipTap poweredTemporary persistenceAutosave loopJSON exportSlash-command blocksTable supportVideo embedsFully typedFully Customizable