Data table on live Bubble data
Sorting, filtering and inline editing, deployed into Bubble as one native element.
AGENT NATIVE
An editor your AI agent can drive
SumCode exposes every project over MCP. Your agent reads, writes, previews and versions your work directly. Claude, Codex, Cursor, Antigravity, VS Code, or anything that speaks MCP.
Claude
Codex
Cursor
Antigravity
VS Code
Examples
See it in action.
Build advanced U.I thats difficult to execute. Running inside Bubble on live data.
1
<div id="cc-data-teeth" hidden>
2[[teeth]] Search for Teeth:format as text
3[[marks]] Search for Marks:format as text
4</div>
MADE FOR BUBBLE
Bridge the gap between AI generated code & bubble.
One hidden element carries live data across the bridge. SumCode renders it as real code, and the build harness makes that code behave natively inside Bubble.
Your rebuilt feature reads live Bubble searches, not copies, and runs in your app as one native element through the free SumCode Connector.
Get started for free
APP CONTEXT
Full context of your Bubble app
SumCode syncs your Bubble app's JSON into every project: every page, element and data type, and how they fit together. Your agent builds against the real structure, so new work slots in instead of fighting what you already have.
Get started for free
Documentation & history
Build code that you can understand & maintain
A plain-English document of what your project does and how it works, updated as you build.
Every save is a version you can read, compare and restore in one click.
Every edit is attributed to a person or an agent, with a timestamp and a diff.
Advanced Table — Products
What this is
A full-featured data table: search, filters, sorting, pagination and inline editing, reading live rows from a Bubble data bridge.
Data flow
Bubble DB → hidden data element → client-side render pipeline.
v45CurrentDark mode: page-number input follows the theme23h
v44Tokens: remove the stray preview comment1dRestore
v43Saved views: wire the save icon1dRestore
v42Guard the null id on toast undo3dRestore
Claude patched v45 · today, 21:47
37
.toolbar { display: flex;
38− background: #ffffff;
38+ background: var(--surface);
39 border-radius: 12px; }
Attributed, timestamped, reversible
Design System
v2.2
Primary ramp
soft#EAF5EA
glow#5CD65C
primary#228B22
deep#1D771D
brand#175E17
Text & surfaces
DisplayInter Tight
BodyDM Sans
1
---
2colors:
3 primary: "#228B22"
4 primary-deep: "#1D771D"
5 ink: "#14180F"
6 canvas: "#FCFCFA"
7---
DESIGN SYSTEMS
Consistent designs
Your design system lives in SumCode. Fonts, colors and spacing become tokens every element uses, so each rebuilt piece matches the app you already have.
- Tokens for colors & fonts
- Custom breakpoints
- Live-data preview
- Versioned saves
- Reusable components
Scale with SumCode
Take it as far as you want
Having your U.I in code opens up so many possibilities and integrations that make your bubble app more powerful.
Level 1
Rebuild the frontend with code & stay in Bubble
Rebuild a page as real HTML, CSS and JavaScript, then paste it back in as a native element. Your data, workflows and hosting never move.
Level 2
Take the frontend out, keep Bubble as the backend
Publish landing pages to Netlify so search engines can actually read them. Bubble keeps running your data and workflows.
Level 3
Connect any external backend, U.I stays in Bubble.
Add an auth token and connect to real data from any backend, such as Supabase, Xano or Firebase. Every stays running & working in Bubble.
FAQ
Frequently Asked Questions
01What is SumCode?
SumCode is an agent driven code editor that allows you to build frontend with code that works in Bubble. You start by connecting your AI agent via MCP, create a workspace and then tell your agent to build you the feature you want. The agent follows the instructions in the MCP to write the code and the instructions for how to connect it into Bubble. The agent will write real code that stays versioned, documented and consistent with your design system.
02Does it work with an existing app
Yes! You can implement features built in SumCode in your existing app. The code can be linked up to existing workflows and databases. You can use it to rebuild old features or build new ones from scratch.
03Do I have to leave Bubble?
Nope! There is no need to leave Bubble. SumCode is optimised to work within the Bubble ecosystem. It is a way to leverage the speed & flexibility of A.I generated U.I without needed to leave the Bubble ecosystem.
04What happens to my Bubble data?
Nothing. Your data, workflows and hosting stay in Bubble while you rebuild the frontend. Rebuilt elements read and write the same live data as the rest of your page, and Bubble keeps running your app.
05What is the SumCode Connector Plugin
The connector plugin is an optimised interfaced that allows you to connect your code into Bubble quicker & easier. It combines the power of the HTML element & the toolbox plugin into one element. It is the recommended way to connect your code into Bubble. It is however not mandatory. You can do the same thing with the HTML element + the toolbox plugin.
06How do I get the code into my Bubble app.
You just copy paste it in. SumCode writes plain HTML, CSS & Javascript. In the editor there is a copy button which you use to then paste the latest version of your code into the SumCode connector (or a HTML element if you chose to use that approach)
07Will custom code break my responsive layouts?
Nope. SumCode understands Bubble's rendering engine. Your agent gets access to a build harness knows how Bubble's responsive engine renders elements, so your code behaves like a native part of the page at every breakpoint.
08Can my elements read and write my live Bubble data?
Yes. SumCode's [[key]] token bridge pipes live Bubble fields into your custom code, so your elements react to the same data as the rest of your app and can publish values back out to your workflows using the outputs values. The logic for setting everythign up is documented in the token bridge tab & the outputs tab.
09Can I use a backend other than Bubble?
Bubble stays your backend, and for most builders it stays that way for good. Connecting something else, like Supabase or Xano, is a much later step that exists only if you ever need it. The same token bridge feeds your elements either way, so nothing about how you build changes.
10Do I need to be a strong coder to use it?
No. Just a Claude or Codex subscription. Your A.I agent handles all the coding for you. Just tell it or show it want you want built and it will execute.
11Which AI coding agents can I connect?
Any that speak MCP: Claude, Codex, Cursor, Antigravity, VS Code and more. They connect over MCP and read, write, preview and version your code directly.
12Does SumCode understand my existing app?
It can. SumCode syncs your app's structure into the project: every page, element and data type, and how they fit together. Your agent builds with real context about the app it is extending, and your app's records never leave Bubble.
13Are my changes versioned and reversible?
Every save is a version you can restore in one click, and agents checkpoint as they work. You can always roll back to an earlier point, so experimenting on a live element is never risky.
14How much does SumCode cost?
SumCode is free during early access. Paid plans will come later, and early users will get plenty of notice before anything changes.