Some links below are affiliate links. If you subscribe through them we may earn a small commission, at no extra cost to you. Updated October 2026 with Controls, the full Compose examples library and the SquareKicker team's own best-practice guidance.
SquareKicker Compose launched on 3 August 2026, and two months on it is still the most interesting thing to happen to Squarespace design in years. It puts an AI design partner directly inside the Squarespace editor: you describe what you want, and Compose writes the custom code, previews the result on your actual page, and applies it when you are happy. No copying snippets out of ChatGPT, no guessing CSS selectors, no pasting into code injection and hoping. If you want the full SquareKicker review (pricing, cancellation, who should skip it), start with my SquareKicker review; this article covers Compose only.
A note on where this review comes from. I run a UK Squarespace agency as a Squarespace Platinum Partner, and I watched the live launch event on 3 August where the SquareKicker team demonstrated Compose and answered questions. This review draws on that event, the official walkthroughs and documentation, the growing library of community builds, and our own early hands-on use. Since launch it has gained a significant new feature, Controls, and SquareKicker has published more than twenty example builds, so I have rewritten this review to cover both.
Nick from SquareKicker walks through the whole thing in the official introduction, and it is worth ten minutes of your time:
Quick verdict
Compose is the first AI tool that actually understands a Squarespace site. It reads your styles, fonts, colour variables and page structure, builds to fit them, previews everything privately on your real page and keeps every attempt as a version you can show a client or roll back to. Controls, added in September, fix the biggest early frustration: you no longer have to spend credits on a new prompt just to nudge a size or a colour. For designers and agencies it is an easy recommendation and it is included in every SquareKicker plan. For site owners with one specific wish, a one-off plugin may still be simpler.
What is SquareKicker Compose?
Compose is a conversational AI design tool built into the SquareKicker extension for Squarespace 7.1, sitting alongside the visual Extension in the top level of the SquareKicker menu (the Extension is covered in our SquareKicker guide). Instead of adjusting sliders and toggles, you chat.
The workflow looks like this. You start a new design and use Select element to click any part of your page: a whole section, part of the header, a specific image or heading. Each click adds a context chip to your prompt, so Compose knows exactly which element you mean; hold Shift to grab several elements at once, or browse the page layers to reach something precise. Then you describe what you want. Compose generates the code, shows you a live preview on your own site that only you can see, and you either apply it, refine it through further conversation, or step back to an earlier version.
What makes the conversation work is how much Compose already knows. It reads your site styles, colour variables, fonts and page structure before you type a word, and unless you tell it otherwise it builds something that fits your existing design. You do not even have to click to select: describe "my hero section" or "all the buttons on this page" and Compose finds them, although SquareKicker's own advice is that selecting manually is the most reliable option when placement matters.
It also works well beyond standard sections and blocks. Compose can work on blog posts, product pages, Member Areas and pages built with Auto Layouts, which is where a lot of Squarespace's styling limits have always bitten hardest.
New since launch: Controls
The biggest change since August arrived in late September. Every Compose design now comes with its own set of Controls, so you can start a design in conversation and then fine-tune the details visually, without writing code and without spending more AI credits. It is a small sentence with a big effect on the economics: the expensive part of AI design is the back-and-forth over details ("slightly bigger", "a touch slower", "warmer colour"), and that back-and-forth is now free. SquareKicker's short walkthrough shows it in action:
In practice this splits the work sensibly. Use Compose for the idea and the structure, which is where AI genuinely earns its keep, then switch to Controls for the polish. It also makes Compose much easier to hand to a junior designer or a confident client, because the controls expose only the parts that are safe to change.
What people are building with Compose
The most useful resource SquareKicker has published is its Compose examples library, which now has more than twenty builds, each with notes on how it was made. They show the range far better than any description, so here is the full collection, grouped by what they do. Every one started from ordinary Squarespace content (a List Section, an Auto Gallery, a standard navigation) that was then selected in Compose and transformed.
Navigation and menus
Navigation is where Compose shines brightest, because Squarespace's header options are so limited and a distinctive menu changes how a whole site feels.
Mega menus that pull in live content from other pages, product collections or sections, so the menu stays in sync with the site.
Michael Brodzik of Vative Creative designed this pill menu in Photoshop first, then uploaded the image as a visual reference.
A full-height menu that opens from the centre of the screen, built from the existing Squarespace navigation.
A pinned, glassy secondary nav that reads your section anchor link IDs and highlights the section in view.
A rotating, full-screen menu that would never be costed into a normal project, built through conversation.
Hover effects and interaction
Three button styles: an arrow that switches sides, a wave of colour fill and a dividing line that bends with the cursor.
A row of images that folds and shifts in three dimensions as the visitor moves across it.
Vic King built this for a client: the book cover curls back on hover to tease the first pages, like an interactive See Inside.
Aaron of Pixel Freez made images and text burst into pixels as the cursor passes through, and shares the Compose code.
Lists, galleries and portfolios
Squarespace's Auto Layout List Sections are a gift for Compose, because the content stays editable in Squarespace while the presentation becomes something else entirely.
A List Section that becomes an expanding gallery; the build Nick demonstrates in the official tutorial.
A minimal list of projects where a GIF preview follows the cursor as visitors hover each row.
Large scrolling titles, image wipes and drag-to-explore, all from a standard List Section.
An Auto Gallery of client logos turned into a continuous, staggered wave.
Client testimonials pinned around a rotating globe, each pin opening an animated card from a List Section.
Megan of Noel and Willow built a carousel that only autoplays on phones, leaving desktop untouched.
Scroll and motion
Large copy that fills in colour as the visitor scrolls, ideal for brand statements and manifestos.
Statistics that count up when they enter view and reset when they leave.
A standard section background video whose playback is tied to scroll position, for a cinematic scrub effect.
Brittani of Studio 113 made a page loader that draws visitors in, revealing the site like a curtain opening.
Commerce and content
A standard product page reworked with a large gallery, sticky buy panel, visual variant selectors and cursor zoom, still using Squarespace Commerce underneath.
Katelyn of Launch the Damn Thing replaced a sidebar plugin with a Compose build that pulls its content from a hidden page, plus a slide-out mobile version.
The commerce example deserves a second look if you sell on Squarespace. The product page template has always been one of the hardest areas to make feel bespoke, and this build keeps Squarespace's own variants, pricing and Add to Cart while changing everything about how the product is presented.
Five designers show how far it goes
SquareKicker also put together a short film of five Squarespace designers walking through what they have made, and it is the best answer I have seen to "but what would I actually use it for?"
The five are Aaron at Pixel Freez (the pixel explode effect), Katelyn at Launch the Damn Thing (the editable blog sidebar), Michael Brodzik at Vative Creative (the bottom pop-up menu), Brittani at Studio 113 (the curtain loader) and Megan at Noel and Willow (the mobile carousel and a typewriter text effect). Three of them also sell templates you can browse on SquareLocator: Vative Creative, Launch the Damn Thing and Pixel Freez. Michael's verdict, quoted on SquareKicker's site, sums up the reaction: "For the first time since I have been building websites, I have finally been able to truly unleash my creativity."
The two builds worth studying in the walkthrough
The first design Nick builds in the getting started tutorial is the horizontal image accordion above, made from ordinary Squarespace list items: every item the same height, evenly spaced across the section, expanding on hover to reveal text over the image while the others shrink, with the first item open by default. One detailed prompt, and Compose produced it in pure CSS, which matters because CSS-only interactions are lightweight and add almost nothing to page load. The prompt itself is the lesson: it specifies what to build, from which content, how it should be spaced, and exactly how the hover behaviour should feel.
The second is a full intro animation: a loading screen, a rotating cube whose faces are images picked from the Squarespace Asset Library, text sliding in from both edges, then a smooth fade into the home page. The instruction that should catch your eye is "only load this animation for the visitor once per session". You can write behavioural rules straight into a prompt, and Compose implements the logic, not just the visuals.
How to get the best results from Compose
SquareKicker's Compose resources page collects the team's own guidance, and it is more candid and practical than most AI documentation. Combined with what the community builds show, these are the habits that make the difference:
- Select before you describe. Click the elements you mean so they become context chips. Compose can find "the hero section" from words alone, but selecting is the most reliable option when placement matters.
- Say what, where, how it looks and how it behaves. SquareKicker's own formula for a first prompt. The accordion prompt in the tutorial is a model of this.
- Show it a picture. Mock the idea up flat in Canva or Photoshop and upload it as a reference image, exactly as Michael Brodzik did for his pop-up menu. Reference images guide the design but never appear in it; Asset Library images are placed into the finished design.
- Ask Compose to ask you questions. For anything complex, ask it to come back with follow-up questions, or to summarise what it is about to build before it starts. It costs a little now and saves a lot of wasted generations.
- One design per conversation. Start a new design for each separate piece of work. It keeps the context fresh, gives better results and uses credits more efficiently.
- Break big ideas into steps. If a result is wrong, check your selected elements, say exactly what is incorrect, and split complex requests into smaller changes. Every update is a new version, so nothing is lost.
- Use Controls for polish. Once the structure is right, stop prompting and fine-tune with Controls. It is free.
- Start from code you already have. Paste existing custom code into a new design and Compose turns it into a versioned design you can keep refining. It is also how you move a design to another site.
- Keep working while it builds. Prompts run on Compose's servers, so you can start another design or carry on editing while one generates.
SquareKicker has also published a set of short videos, each covering one part of the workflow: selecting elements for better prompts, adding images and visual references, applying and disabling a design, creating, comparing and presenting versions, the code editor and global styles, reusable code and background generation.
Versions: the most agency-shaped feature in it
Every prompt or code edit creates a new version, versions can be renamed, and clicking any of them previews it instantly on your actual site. The walkthrough shows the workflow this unlocks for client work: Nick builds several variations of an overlay menu, names the favourite "option two", and flicks between them live. That is a design presentation running on the client's real website rather than in Figma, which is a genuinely different conversation to have in a review call.
Restoring an older version duplicates it to the top of the stack rather than overwriting anything, so the conversation and every earlier version are preserved. Applied designs are flagged with a lime dot on the Compose home screen so you can see at a glance what is live, designs can be disabled (which removes their code from the site) and finished experiments can be archived and restored later. It is a proper checkpoint system, which is more than can be said for the loose snippets most of us have accumulated in code injection over the years.
How it compares to pasting code from ChatGPT
Plenty of Squarespace owners already use AI for custom code, and the results are hit and miss. A general chatbot does not know your site structure, so it guesses at selectors, produces code that targets nothing, and leaves you debugging in a separate window. Compose reads the actual page you are working on and builds to fit it, and when a result is wrong, it stays in the conversation and helps you fix it in place.
For those who want to see the code, paid plans include a code editor where every version is formatted to be readable (unlike the compressed code Squarespace stores in code injection), with adjustable variables at the top. Hand edits save as a new version rather than overwriting the AI's work. You never have to open it, and the free trial does not include it, but it is a genuine reassurance for agencies who need to know what is running on a client's site.
One more detail: Compose picks the AI model for each request automatically, based on how complex the task is and what it needs. You never choose a model, and SquareKicker's stated aim is the best result at the lowest cost.
Pricing and credits
Compose is not sold separately. It is bundled into every SquareKicker plan as a monthly credit allowance. All prices are in USD; the range on each plan reflects annual versus monthly billing:
| Plan | Price | Compose credits |
|---|---|---|
| Free trial | $0 for 14 days | 500 credits on one site, no credit card required (no code editor) |
| Solo | $19 to $31 per month | 500 credits per month, one site, code editor included |
| Designer | $47 to $69 per month | 2,000 credits per month, 10 active sites |
| Agency | $79 to $97 per month | 4,000 credits per month, 25 active sites |
Credits are only used when Compose generates a response, creates a design or helps fix one. Previewing, applying, switching versions, adjusting Controls and working in the code editor are all free. Included credits renew monthly on your subscription date and do not roll over; extra credits can be bought at any time through Compose or the SquareKicker dashboard, sit at account level across all your sites and last 12 months, and your included credits are always used first. If you run out mid-conversation you can top up and carry on without losing your work. Prices and allowances can change, so check the current figures on SquareKicker's site.
The honest caveats
Credit cost is not predictable in advance. The credits a request uses depend on its complexity and how much context Compose has to process, so you cannot see the cost before asking. Controls have taken a lot of the sting out of this, and the one-design-per-conversation habit helps, but it is worth watching your balance in the first few weeks.
It cannot touch everything. Content loaded inside protected iframes is off limits: Compose can style the container around an Acuity or Squarespace Scheduling embed, a Calendly widget, a Typeform, a YouTube or Vimeo video, Google Maps, SoundCloud or an external social feed, but not the content inside. Checkout and some Member Areas screens also limit how reliably custom code applies.
Saved and duplicated sections do not carry Compose designs. Extension customisations survive saved sections, but Compose designs do not; you select the new section and ask Compose to recreate the design. Moving a design to another website works by copying its code from the code editor into a new design, which needs an active subscription on both sites, and because every site is structured differently it may need adapting.
It is still custom code. Applied designs live in code injection, and like all custom code they can occasionally be affected by Squarespace updates or by other plugins and scripts on the site. SquareKicker's support will help troubleshoot and Compose itself can investigate and fix a broken design, but the team is upfront that they cannot always resolve conflicts caused by third-party code. That is a different maintenance profile from the core Extension tools, which SquareKicker updates centrally.
And it needs a subscription. Applied Compose designs stay on your site if you cancel, consistent with how SquareKicker has always worked, but generating anything new requires an active plan. The free trial is different: when it ends without an upgrade, SquareKicker changes are removed until you subscribe.
Who is Compose for?
For designers and agencies, this is the easiest recommendation I make. If you already pay for SquareKicker, Compose is in your plan today. If you have been on the fence about the subscription, the calculation has changed: you are paying for a code partner that knows Squarespace's structure better than a general chatbot ever will, a versioning system that turns design reviews into live demonstrations, and now free visual Controls for the finishing touches. Compose can be used on client websites connected to your subscription, and the Designer plan's 2,000 monthly credits are shared across your active client builds.
For site owners, it depends on ambition. If your wishlist is one specific feature such as a mega menu, a one-off plugin from our navigation plugins guide may still be cheaper and zero effort. If your wishlist is a feeling, the sense that your site could be more interesting than the template underneath it, Compose is the first tool that makes chasing that practical without hiring a developer. Start with the 14-day free trial: 500 credits is enough to build several real designs and find out.
Compose also changes the calculation on templates. I would still start most projects from a strong base in our Squarespace templates hub, and our SquareKicker templates collection is a natural pairing, because Compose is far better at adding interaction to a well-structured site than at rescuing a weak one.
It is also worth saying what this signals. Squarespace's own AI investment has focused on site generation and visibility (we covered its AI visibility tool earlier this summer), while Compose is the first serious AI tool for design and interaction inside the platform, and it has come from a third party. That is very good news for the Squarespace plugin ecosystem this site exists to cover.
Try SquareKicker Compose free for 14 days · Browse every Compose example · Browse SquareKicker templates on SquareLocator
Frequently Asked Questions
What is SquareKicker Compose?
Compose is an AI design partner built into the SquareKicker extension for Squarespace 7.1. You describe a design or interaction in conversation, and Compose writes the custom code, previews it on your page, and applies it to your site when you are happy, with every change saved as a restorable version.
How much does SquareKicker Compose cost?
Compose is included in every SquareKicker plan rather than sold separately. The 14-day free trial includes 500 credits, Solo ($19 to $31 per month) includes 500 monthly credits, Designer ($47 to $69) includes 2,000 and Agency ($79 to $97) includes 4,000. Extra credits can be bought at any time and last 12 months.
What are Compose Controls?
Controls arrived in September 2026. Every Compose design now comes with its own visual controls, so once a conversation has produced a design you can fine-tune the details visually instead of writing further prompts. Adjusting controls does not use any AI credits.
How do Compose credits work?
Credits are only used when Compose generates a response, creates a design or helps fix one. Previewing, applying, switching versions, adjusting Controls and editing in the code editor are all free. Monthly credits renew on your billing date and do not roll over; extra credits are shared across your account and last 12 months.
Is Compose safe to use on a live client website?
Yes. Previews are only visible to you in your browser and add no code to the site, so visitors see nothing until you apply a version. Applied code goes into the site's own Squarespace code injection area, every version is backed up on SquareKicker's servers, and Compose can be used on client sites connected to your subscription.
What can Compose not do?
Compose cannot change content inside protected iframes such as Acuity Scheduling, Calendly, Typeform, YouTube, Vimeo, Google Maps or external social feeds, though it can style the container around them. Checkout and some Member Areas screens limit custom code, and Compose designs are not carried over automatically when a section is saved or duplicated.
Related SquareLocator Guides
- SquareKicker Review (2026): Is the Squarespace Design Extension Worth It?
- SquareKicker Extension Guide
- Best Squarespace Plugins in 2026
- Best Squarespace Mega Menu and Navigation Plugins in 2026
- Squarespace's AI Visibility Tool: What It Does and What It Doesn't
- How to Add Plugins to Squarespace: A Beginner's Guide
This article contains affiliate links. If you subscribe through them we may earn a small commission, at no extra cost to you. We only feature tools we would recommend on their own merits. Screenshots, demo animations, community examples and videos are from SquareKicker's official Compose walkthroughs, resources page and Discover library, credited to the designers who built them.
