Floating Toolbar - Dark Theme

This editor uses a floating toolbar that appears near the text selection. Try selecting any text below to see the toolbar appear.

Welcome to the floating toolbar demo. Try selecting this text to see the toolbar appear near your selection. You can format text as italic, underlined, or code.

The toolbar will automatically position itself above or below your selection depending on available space, and will follow your selection as you move through the document.

Features to Try:

  • Select text to see the floating toolbar appear
  • Try different formatting options
  • Create links by selecting text and clicking the link icon
  • Notice how the toolbar follows your selection

This floating toolbar is perfect for distraction-free editing, keeping formatting tools accessible exactly when and where you need them.

Floating Toolbar - Light Theme

Same floating behavior with light styling. Select text to see the toolbar appear.

This editor demonstrates the light theme with the same floating behavior. Select this text to see how the light-themed toolbar appears.

The toolbar will automatically adjust its position based on your selection and available screen space, ensuring it's always visible and accessible.

Try selecting this blockquote text to see how the toolbar appears when working with different content types.

You can try creating lists:

  1. First item
  2. Second item
  3. Third item

Custom Theme

A floating toolbar with a custom theme applied.

This is a custom-themed toolbar example. Try selecting some text to see the custom-styled toolbar.

Font Selection Demo

This editor demonstrates the font selection feature with both system fonts and Google Fonts.

Try selecting this text and using the font selector to change its appearance. You can choose from system fonts or Google Fonts.

This paragraph shows how different fonts can enhance your content. Try applying different fonts to see how they affect readability and style.

Typography is an essential part of design. Each font brings its own personality to your content.

Some examples of what you can do:

  • Use serif fonts for traditional or formal content
  • Apply sans-serif fonts for modern, clean looks
  • Mix different fonts to create visual hierarchy
  • Experiment with Google Fonts for unique styles