Install Editbar on anything with markup.

The whole integration is one attribute and one script tag. There's no SDK, no build step, and no framework-specific package — data-edit-id is just a plain HTML attribute, so it survives whatever renders your page.

This page is for whoever installs Editbar — usually a developer, once. If you're a marketer who just wants to edit text, you don't need anything here: send this page to your developer, or see what Editbar looks like day to day instead.

Plain HTML React Vue Astro WordPress

Per-framework quick start

Same attribute, same script tag, in whatever you're already using.

Plain HTML

Works anywhere — this is the whole contract the widget relies on.

<h1 data-edit-id="hero.title">Welcome to Acme Studio</h1> <script src="https://your-domain/widget.js" data-api="https://your-domain/YOUR_SITE_ID" defer></script>

React

Attributes pass straight through JSX — no wrapper component needed.

export default function Hero() { return <h1 data-edit-id="hero.title">Welcome to Acme Studio</h1>; }

Vue

Same attribute, same rules, inside a Vue single-file component.

<template> <h1 data-edit-id="hero.title">Welcome to Acme Studio</h1> </template>

Astro

Works in .astro files exactly like plain HTML, server-rendered or not.

--- --- <h1 data-edit-id="hero.title">Welcome to Acme Studio</h1>

WordPress

Edit your theme's template files (or a custom HTML block) directly.

Marking up rich content (Pro+)

By default, an editable element's text content is what's editable. Two more attributes unlock the rest:

data-edit-type="link" on an <a> — makes its href editable via a URL prompt, not just its label text.
data-edit-type="image" on an <img> — makes its src editable via a URL prompt.

Leave the attribute off for plain text — that's the default and needs nothing extra.

Handing this to an AI coding assistant

Paste this into Claude, Cursor, or Copilot Chat against your own codebase — it's a complete, self-contained brief.

You are adding Editbar (an inline text-editing widget) to this website's codebase. Do the following:

Add this script tag once, near the end of <body> (or in the root layout/template) — not once per page:
   <script src="{origin}/widget.js" data-api="{origin}/YOUR_SITE_ID" defer></script>

Find every piece of static, human-authored text a non-technical editor might want to change later: headings, paragraphs, button/CTA labels, nav links, footer text. Do NOT tag content from a database, CMS, or user input.

For each one, add data-edit-id="section.field" — a short, unique, dot-namespaced id (e.g. hero.title, nav.cta, footer.copyright).

If an <img>'s src should be editable, also add data-edit-type="image". If an <a>'s href should be editable, also add data-edit-type="link". Leave plain text elements without a data-edit-type.

Don't change any existing classes, styles, or component structure — only add the attributes and the one script tag.

List every data-edit-id you added and which file it's in, so it can be reviewed before deploying.

Questions, answered

Do I need to rebuild or redeploy after adding data-edit-id?+

Yes, once — like any markup change. After that, edits happen live in the browser and don't need a deploy.

What if two elements accidentally share an edit-id?+

Both will show the same text and update together — keep ids unique per element, the same way you'd keep HTML ids unique.

Does the widget slow down my site?+

It's a small script loaded with defer, and it only fetches your published overrides — no build-time cost, no bundler plugin.

Start editing your site in five minutes.

Start free — no card View on GitHub