Logo

Developed by Siam Ahnaf

0 characters
0 words

Output

<h2 style="text-align: left;">Welcome to Ritext ✨</h2><p style="text-align: left;">Ritext is a modern rich text editor built for React. It’s designed to feel simple at first, but powerful when you need structure.</p><p style="text-align: left;">Try selecting text to test inline formatting like <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike</s>, and inline code.</p><blockquote><p style="text-align: left;"><span style="color: rgb(226, 102, 82);">“Write clean content, then style it your way.”</span></p></blockquote><h3 style="text-align: left;">Quick demo checklist</h3><ul><li><p style="text-align: left;">Make a sentence <strong>bold</strong> and <em>italic</em></p></li><li><p style="text-align: left;">Turn this list into an ordered list</p></li><li><p style="text-align: left;">Add a link to <a target="_blank" rel="noopener noreferrer" class="link" href="https://ritext.vercel.app">ritext.vercel.app</a></p></li></ul><h3 style="text-align: left;">Image support</h3><p style="text-align: left;">Images can be inserted inline to enrich content. Here’s one sample image:<br></p><p style="text-align: center;"><img src="https://imagisum.vercel.app/image?id=x-10489623&width=1280&height=857" alt="Ritext" data-width="517" data-height="388" data-inline="false" data-flip-x="false" data-flip-y="false" data-align="center" data-border-radius="24" style="text-align: left; border-radius: 24px;">A sample image inside the Ritext playground.</p><h3 style="text-align: left;">Video embeds</h3><p style="text-align: left;">Paste a YouTube link or use the toolbar to embed a video. You can set its size, controls, autoplay, loop and alignment:</p><div data-youtube-video="" style="text-align: center;"><iframe src="https://www.youtube.com/embed/bON-KPiiNCk" width="640" height="360"></iframe></div><h3 style="text-align: left;">Try a nested list</h3><ul><li><p style="text-align: left;">Ritext basics</p><ul><li><p style="text-align: left;">Headings</p></li><li><p style="text-align: left;">Lists</p></li><li><p style="text-align: left;">Blockquotes</p></li></ul></li><li><p style="text-align: left;">Next steps</p><ul><li><p style="text-align: left;">Tables</p></li><li><p style="text-align: left;">Slash commands</p></li><li><p style="text-align: left;">Custom nodes</p></li></ul></li></ul><h3 style="text-align: left;">Collapsible sections</h3><details><summary>What can I put inside a details block?</summary><div data-type="detailsContent"><p style="text-align: left;">Anything: text, lists, images, even another details block. Click the arrow to open and close it.</p></div></details><p style="text-align: left;">End of demo — now edit this content and make it yours 🚀</p>

Back to Home Page