Text Atelier
A WYSIWYG rich-text editor built on Tiptap and ProseMirror. Ships as one web component plus a small typed wrapper per framework.
Text Atelier (Web Component)
Text Atelier is a WYSIWYG rich-text editor built on Tiptap and ProseMirror. It ships as
one web component (<atelier-editor-element>) plus a small typed wrapper per framework. All
styling lives inside the component's Shadow DOM, so there is no CSS file to import and your
site's styles cannot break the editor.
Packages
| Package | Framework |
|---|---|
@innosoft/atelier-editor-angular | Angular ≥ 14 (standalone or NgModule) |
@innosoft/atelier-editor-react | React 18 / 19 |
@innosoft/atelier-editor-vue | Vue 3 (v-model) |
@innosoft/atelier-editor-vanilla | Any plain JS / TS app |
@innosoft/atelier-editor-core | The web component itself — installed automatically with every wrapper |
Key Features
Text Formatting
Bold, italic, underline, strike, inline code, text color, highlight, subscript, superscript, font family, and font size.
Document Structure
Headings (H1–H6), blockquotes, bullet and ordered lists, indent/outdent, horizontal rule, tables with resizing, image and YouTube embeds with drag-resize handles.
Layout & Typography
Text alignment, line height, smart typography substitutions, and a customizable placeholder.
PDF Export
Built-in export to PDF via html2pdf.js, with inline-style rendering so the exported document
matches what you see in the editor.
Accessibility & UX
Full keyboard navigation, native RTL support, English and Arabic locales out of the box with runtime locale switching, and a Tailwind-themeable dark mode.
Styling & Security
Fully theme-able via CSS custom properties, no runtime CSS to import, and the published bundle is obfuscated with zero runtime dependencies beyond Tiptap itself.