Examples

See what you can build

Explore real-world editor configurations built with Typix. Each example showcases a different use case — from simple text inputs to AI-powered interfaces — so you can find the right starting point for your next project.

Get started
FeaturedEditor

Default text editor

Learn how to create a default rich text editor with Typix.

rich-texttoolbarbasic
beginner
Explore example
Loading preview...
Formatting
Add content formatting to your Typix Editor.
bolditalicheadings
Editor
beginner
Auto Link
Automatically detect and linkify URLs as you type.
linksauto-detecturls
Editor
beginner
Context Menu
Right-click context menu with formatting and editor actions.
right-clickmenuactions
Editor
beginner
Character Limit
Show a live character count and enforce a maximum length.
counterlimitvalidation
Editor
beginner
Max Length
Hard-limit input length and prevent typing beyond it.
limitconstraintinput
Editor
beginner
Tab Focus
Control focus behavior and tab key interactions in the editor.
focusaccessibilitykeyboard
Editor
beginner
Floating Link
Floating toolbar for inserting and editing hyperlinks inline.
linkstoolbarinline
Editor
intermediate
Collapsible
Collapsible sections to hide and reveal content blocks.
collapsesectionsblocks
Editor
intermediate
Draggable Blocks
Drag and reorder content blocks with a handle.
dragreorderblocks
Editor
intermediate
Drag & Drop Images
Drop or paste images directly into the editor — wired up via the drag-drop-paste extension.
imagesdrag-droppaste
Editor
intermediate
Image Extension
Block-level images with resize handles, alignment controls, captions, and alt text.
imageresizealignment
Editor
intermediate
Syntax Highlighting
Inline syntax highlighting for code blocks powered by Prism.js or Shiki.
codesyntaxprism
Editor
intermediate
Code Block
Multi-line code blocks with language selection — the foundation for syntax highlighting and Prettier formatting.
codeblocklanguage-picker
Editor
intermediate
Code Block + Prettier
Format code blocks on demand with Prettier — keeps options like tabWidth and singleQuote configurable per editor.
codeprettierformatter
Editor
advanced
Mentions
@ mentions with an autocomplete dropdown for users.
@mentionautocompleteusers
Editor
intermediate
Keywords
Highlight special keywords as styled nodes in the editor.
highlightnodescustom
Editor
intermediate
Coming soon
Markdown Shortcuts
Type markdown syntax (## , *, `, >, -) and watch it convert to formatted blocks as you go.
markdownshortcutssyntax
Editor
beginner
Slash Command
Notion-style / menu for inserting headings, lists, code blocks, and any custom block.
slashmenuinsert
Editor
intermediate
Tailwind Theme
Drop-in Tailwind-friendly theme tokens — style editor nodes with utility classes instead of custom CSS.
tailwindstylingtheme
Editor
beginner
Coming soon
Tasks
Add task lists to your Typix Editor.
taskschecklisttodos
Editor
beginner
Coming soon
Tables
Rows, columns, cell merging, resize handles, and frozen headers — built on the Table extension.
tablesgriddata
Editor
advanced
Coming soon
Minimal Note
A clean, distraction-free writing experience for quick notes.
minimalnotewriting
Editor
beginner
AI Autocomplete
AI-powered inline autocomplete suggestions as you type.
aiautocompletesuggestions
Ai
intermediate
Speech to Text
Dictate content with real-time speech-to-text transcription.
speechvoiceai
Ai
intermediate
Coming soon
AI Chat Interface
A conversational editor with markdown rendering and streaming-style input.
chatstreamingai
Ai
advanced
Coming soon
Slack / Discord Messenger
A messaging-style editor with mentions, emoji, and slash commands.
messagingmentionsslash-commands
Collaboration
advanced
Coming soon
Comment Thread
A lightweight comment editor for forums with mentions and reactions.
commentsreactionsthread
Collaboration
intermediate