Edit Squarespace Code Blocks.

A beautiful Code Block is a gift until the client needs to change it.

Custom Code Blocks let us build what Squarespace can't do natively: pricing tables, bespoke layouts, and increasingly, animated sections built with AI. They look great. But hand the site over, and the client is locked out: they can't change a price, a headline or an image without touching the code.

The Squarespace Code Block Editor fixes that. Your client safely edits the text, numbers, images and colours inside the block themselves: no code, no emails. While the structure and any animation stay exactly as you built them. A hand-off headache becomes a service you can offer.

Unlimited Usage on any site!

Squarespace Code Block Editor

$40.00

Hand off custom code blocks your clients can actually edit — change the text, images, and colours from a simple panel, no code required.

Code Block Editor

Same block. No code.

The same pricing block — as your client sees it, as it's really built, and as the editor lets them change it.

What your client sees

Hourly

2 hours (or less)$20
Half Day (2–5 hrs)$29
Full Day (5+ hrs)$40

What it's built from

HTML

<!-- Hourly -->
<div class="ds-card">
  <h3>Hourly</h3>
  <ul class="ds-rate">
    <li><span>2 hours (or less)</span><span class="ds-price">$20</span></li>
    <li><span>Half Day (2–5 hrs)</span><span class="ds-price">$29</span></li>
    <li><span>Full Day (5+ hrs)</span><span class="ds-price">$40</span></li>
  </ul>
</div>

What they edit — no code

Edit contentV1

Search your content…

All Text Colour Image

HEADINGHourly

Hourly

Text type

Heading 3

PRICE

$20

Squarespace Code Block Editor — Edit Code Blocks Without Code

It lives in the editor

A small </> icon, right in the Squarespace toolbar.

No bookmark, no browser extension, no separate login. Your client opens the page, clicks a Code Block, and a clean editing panel slides in next to the toolbar they already know.

01 — How it works

It edits the block's own code, then saves the Squarespace way.

01.1

Reads the real source

The panel reads the HTML inside your Code Block and turns each piece of text, link, image and style into a simple, labelled field. Nothing is re-created or approximated.

01.2

Writes back in place

Changes are written straight back into the same Code Block. Your structure, classes and layout stay exactly as you wrote them — only the content inside changes.

01.3

Saves the native way

Edits apply live as your client types. To publish, they click Squarespace's own Save button. There's no new workflow and nothing extra to learn.

01.4

No external storage

Content never leaves Squarespace. There's no database, no backend and no third-party copy of your site's text. The Code Block remains the single source of truth.

02 — What your client edits

Plain-English fields. No CSS, ever.

Every control is named the way a non-developer thinks — “Text”, “Text size”, “Text colour”, “Link”, “Image”. The words “clamp”, “span” and “selector” never appear. All the fields for one element sit together on a single card.

02.1

Text, links & images

Edit any copy with the markup stripped out, so a client can't accidentally break a tag. Repoint a button or link. Swap an image and its description, with a live thumbnail — including CSS background images, not just <img> tags.

Text · Link · Image · Alt

Edit content

HEADING

cabin

Text type

Heading 1

Text colour

#1b1b1b

Appearance▸

02.2

Real colour pickers

A large swatch and hex field for every text colour — even when it comes from a theme variable like var(--ink). Picking a colour overrides it cleanly, and translucent colours get an opacity slider so the alpha is editable too.

02.3

Font size with px / rem

Adjust text size with a one-click toggle between px and rem. It converts the number for you and never silently rewrites sizes you didn't touch.

px · rem

02.4

Change the text type

Promote a paragraph to a heading, or change a heading's level (H1–H6), from a simple dropdown. The text and styling classes stay intact — the element just takes on your theme's styling for the new type.

Paragraph · H1–H6

02.5

Grouped per element

Each heading, paragraph, button and image gets its own card, with its words up front and finer styling tucked away — so the panel never feels like a wall of options.

03 — Find it fast

Built so a busy client never feels lost.

03.1

Click an element to edit it

A live mini-preview of the block sits at the top of the panel. Click the heading, a button or an image in it and the panel jumps straight to that element's fields.

Point & edit

Edit content

Search your content…

All Text Colour Image

03.2

Live search

Type any word from the page and the panel filters to the matching elements instantly — handy on a long block with lots of copy.

03.3

Filter by type

Chips at the top — All · Text · Colour · Image — narrow the panel to just the kind of edit you're making, so a client changing only colours isn't distracted by everything else.

03.4

Tidy by default

Advanced styling collapses into an “Appearance” section, so what's visible first is just the content. Nothing technical shows until it's wanted.

04 — Layout Beta

Reorder columns in a layout.

Image on the left, text on the right — and the client wants it the other way around? The editor spots column layouts and lets you reorder them: a one-click swap for two columns, or move arrows for three or more. No dragging, no code, no broken grid. This one's in beta — nested grids can get finicky, so the panel flags it as Beta wherever it appears.

04.1

Two columns, or many

Two-column layouts get a single Swap order button; three or more get per-column move arrows. The tool only offers it on real flex/grid column layouts, and reorders the blocks physically in your code.

Edit content

LAYOUTBeta

3 columns

1Hourly

2Two Dogs

3Add-On Services

05 — Responsive

Keep it right on mobile, too.

A custom block should look as good on a phone as on a desktop. The editor gives your client the controls to keep it that way — without opening media queries.

05.1

Separate mobile font sizes

Every text size has a companion Mobile size field. Set a smaller size for phones and the tool writes (or edits) the right @media rule for you — the desktop size is left untouched.

Edit content

HEADING

Text size

30px

pxrem

Mobile text size · ≤600px

22px

pxrem

05.2

Desktop / mobile preview

Flip the in-panel preview between desktop and mobile to see how the block reflows, then click straight onto the element you want to fix.

Edit content

Desktop Mobile

06 — Safe by design

Your client can't break what you built.

06.1

Structure is off-limits

It only changes content within the block — never the HTML structure, your classes, or your <style>. The design you shipped is protected.

06.2

Live preview

Every edit shows on the page as it's typed, so there are no surprises between editing and publishing.

06.3

One-click revert

A single button restores everything to exactly how it was when the panel was opened — an easy way back from any change.

06.4

Fails safe

If it can't find an open Code Block it says so plainly, rather than guessing or writing to the wrong place.

06.5

Zero impact on visitors

The script does nothing on your live site — it only activates inside the Squarespace editor. Your published pages are untouched and unaffected.

06.6

Reads your design

The launcher icon and tooltip inherit the editor's own font and styling, so the tool feels like a native part of Squarespace rather than a bolt-on.

FAQ

Questions we get asked a lot.

No. That's the whole point. They see plain fields — Text, Image, Text colour, Font size — never HTML or CSS. They edit, the page updates live, and they click Squarespace's Save.

Only the content you'd want changed. It edits text, links, image sources, colours and font sizes (including separate mobile sizes) inside the block, can change a paragraph into a heading, and can reorder columns in a layout (beta). It never rewrites your structure, your classes or your <style> block.

Straight into the Code Block itself, saved with Squarespace's normal Save. There's no external database and no third-party copy of your content — the block stays the single source of truth.

Yes. They edit inside the Squarespace editor, so they need a contributor or editor role on the site. The tool makes Code Blocks safe for them to touch — it doesn't replace having editor access.

No. On your live site the script does nothing at all — it checks whether it's inside the editor and exits immediately otherwise. Visitors never load the editing panel.

Text, link destinations, image sources and alt text (including CSS background images), text colours (including theme-variable and translucent colours), desktop and mobile font sizes, and the text type (paragraph ↔ heading) — grouped per element. It can also reorder columns in a flex/grid layout, a feature currently in beta. It deliberately won't restructure arbitrary markup.

Paste one line into your site's Footer Code Injection. The </> launcher then appears in the editor toolbar for anyone with access. Your exact snippet is sent after purchase.

Yes. It installs through Squarespace's Code Injection, which is included on the Core, Plus, and Advanced plans (and older Business / Commerce plans). It isn't available on the Basic plan, so you'll need at least Core.

Yes. One footer snippet covers the whole site, and the editor works with any HTML Code Block — the ones you've built and any you add later.

Yes. Add the one-line footer snippet to each site you build, and the editor is available on every Code Block on that site.