Floating Toolbar — Format Selected Text Without Leaving Your Flow

Eddyter's Floating Toolbar is a selection-triggered editing panel that appears next to your cursor the moment you highlight text. Format, link, style, or apply AI quick actions. Never move to a fixed toolbar at the top of the screen.

If you've used Medium, Notion, or Linear, the experience feels familiar. The difference: Eddyter brings the same focused-editing feel into your SaaS app. Zero plugin work. Native support for React, Next.js, Vue, Angular, Svelte, Laravel, and Vanilla JS.

🎥 New to Eddyter? Watch: What is Eddyter? Why Developers Are Switching in 2026

What Is the Floating Toolbar?

The Floating Toolbar is an inline editing panel that appears when you select text inside the editor. Formatting controls come to your cursor. You don't move your eyes to a top toolbar.

Select a word, a sentence, or a paragraph. A context-aware toolbar appears next to the selection. It shows exactly the actions you need.

Quick Toolbar vs Floating Toolbar

These two features sound similar but do different jobs. Worth understanding both:

Together, they cover both halves of writing. Quick Toolbar adds new content. Floating Toolbar refines existing content. Most modern editors ship both.

Format Without Hunting Through Menus

The Floating Toolbar handles every formatting action you'd reach for during inline editing:

• ✏️ Text styling — bold, italic, underline, strikethrough
• 🔗 Links — insert and edit hyperlinks inline
• 💻 Inline code — wrap selected text in code formatting
• 🎨 Color and highlight — apply text and background color
• 📋 Lists — convert selected lines to bullets or numbers
• 💬 Quote and callout blocks — turn paragraphs into pull quotes
• 🤖 AI quick actions — Simplify, Adjust Tone, Rewrite (on AI plans)

Everything sits next to your cursor. No mouse trips to the top of the screen. No memorizing every keyboard shortcut.

Context-Aware by Design

The Floating Toolbar shows tools that match what you've selected:

• 📝 Selected plain text → formatting controls
• 🔗 Selected text with a link → link edit and remove options
• 💻 Selected code-formatted text → code-related actions
• 🤖 Selected AI-eligible text → AI quick actions appear

This keeps the toolbar focused. You don't see twenty buttons when you only need three. Speed compounds.

Built Directly Into the Editor

The Floating Toolbar isn't a plugin or a browser extension. It's not a separate library. It ships with the standard Eddyter editor on every plan — including Free.

For developers integrating Eddyter into a SaaS app, that means:

• ✅ No bubble-menu library to evaluate or install
• ✅ No selection event handling to debug
• ✅ No positioning logic to write (flip and overflow handled)
• ✅ Works out of the box across 6 frameworks

Setup details are in the Eddyter docs.

Integration in 3 Steps

Setup takes under 10 minutes. The Floating Toolbar works the moment you render the editor.

Step 1 — Get Your API Key

Visit eddyter.com/user/license-key. Copy your key. Add it to your env file.

Step 2 — Install Eddyter

bash

1
npm install eddyter

Step 3 — Render the Editor

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider
} from 'eddyter';
import 'eddyter/style.css';
export default function Editor() {
  const apiKey = 'your-api-key';
  const handleContentChange = (html) => {
    console.log('Editor content:', html);
  };
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        onChange={handleContentChange}
      />
    </EditorProvider>
  );
}

The Floating Toolbar appears automatically when users select text. No extra config.

🎥 See it run live: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

How It Compares to Static Toolbars

For SaaS teams shipping editors to their own users, the floating model is what users expect now. Static toolbars feel like 2010-era software.

Where the Floating Toolbar Earns Its Keep

📝 Editorial Review and Polishing

Reviewers can reformat sentences, fix links, and tweak emphasis. They never break out of the document.

✍️ Blog Drafting

Apply inline formatting as you write. Bold a key term. Link to a reference. Italicize a citation. All without leaving the keyboard's natural position.

📚 Documentation Editing

Wrap technical terms in code formatting. Add inline links to API references. Emphasize warnings in place.

📧 Customer Communications

Polish emails, announcements, and customer copy. Quick selection-based formatting keeps your flow.

📖 Long-Form Writing

The longer the document, the more time you save. No scrolling back to a top toolbar for every formatting action.

📱 Mobile Editing

Static toolbars cramp mobile screens. Floating toolbars appear only when needed. More room for content.

Why Floating Toolbars Matter in 2026

The shift from static to floating toolbars is one of the bigger UX changes in modern content tools:

• 🧠 Lower cognitive load — tools appear in peripheral vision
• 📱 Mobile editing works — static toolbars don't fit on phones
• 👥 Users expect it — Notion, Medium, Linear all ship floating toolbars
• ⚡ Speed compounds — seconds saved per edit add up fast

If you're evaluating Eddyter end-to-end, Integrate Eddyter in 30 Minutes walks through full setup. That includes floating toolbar, slash commands, and AI features.

Multi-Framework Support

The Floating Toolbar works natively across every framework Eddyter supports:

• ⚛️ React 18.2+ / 19 — native components
• 🚀 Next.js 14/15 — App Router and Pages Router
• 💚 Vue.js 3 — Composition API ready
• 🔷 Angular 17+ — standalone components
• 🧡 Svelte 4/5 — works in SvelteKit
• 🐘 Laravel — Blade, Livewire, Inertia.js
• 📦 Vanilla JS — no framework needed

Same toolbar. Same UX. Same code patterns. One API key works in all of them.

Floating Toolbar at a Glance

Combine With Other Eddyter Features

The Floating Toolbar pairs cleanly with the rest of the editor:

• 🔀 Quick Toolbar (Slash Commands) — insert new blocks with /
• 🖱 Drag and Drop — restructure content visually
• 💻 HTML Code Editor — switch to source view
• 🤖 AI Quick Actions — Simplify, rewrite, adjust tone on any selection

Together, they create a complete writing and editing experience.

Why It Matters

Static toolbars were a UX compromise. They came from an era of small screens and slow software. Modern editors put tools where the work happens. Next to your cursor. When you need them. Gone when you don't.

The Floating Toolbar makes that the default in Eddyter. So you stay focused on what you're writing. Not on where your formatting buttons live.

Ready to Ship a Modern Editing UX?

Stop forcing your users to chase top toolbars. Drop Eddyter into your app today and ship Medium-style editing in under 10 minutes.

👉 Try Eddyter free at eddyter.com 📚 Read the docs 🎥 Watch the intro video | Watch the 30-min setup guide