DEV Community

Amith Moorkoth
Amith Moorkoth

Posted on

Introducing Bombie: A Drag-and-Drop Builder for Material-UI in React

#opensource #materialui #webdev #react

Most of the time, building a React UI with Material-UI looks like this: open the docs, copy a <Button variant="contained" color="primary">…</Button>, paste it into your component, tweak props, save, alt-tab to the browser, reload, repeat. It works — but for sketching layouts or onboarding new developers to MUI's prop surface, the loop is heavier than it needs to be.

Bombie is an experiment in shortening that loop. It's a drag-and-drop visual builder for Material-UI in React. You drop components onto a canvas, edit their props through a grouped property dialog, preview the result at mobile, tablet, or desktop widths, and the whole UI is serialized as a JSON tree under the hood.

You can try it right now without cloning anything: bombie-three.vercel.app.

This post is the first in a series. Here I'll cover what Bombie does, who it's for, and the design ideas behind it. Later posts will go into the architecture, how to add a new component in five small edits, and the lessons I picked up shipping it.

What Bombie actually does

Bombie ships with 40+ draggable Material-UI components organized into five categories:

  • Layout — Box, Grid, Stack, Container, dividers
  • Form Elements — TextField, Select, Checkbox, Switch, Slider, buttons
  • Data Display — Typography, Card, Table, List, Avatar, Chip
  • Feedback — Alert, Snackbar, Dialog, Progress
  • Navigation — AppBar, Tabs, Breadcrumbs, Menu

Drag any of them from the palette onto the canvas. Click the wrench icon on a placed component and you get a grouped property editor — variant, color, size, state, behavior — instead of one flat list of inputs. That's the bit I'm most proud of, because MUI's prop surface is wide and a generic "key/value" editor would be miserable to use. Bombie defines a per-component schema and the editor renders form controls from it.

Switch to Preview and the same tree renders inside an iframe with mobile, tablet, and desktop viewport toggles. Because the breakpoint logic is evaluated against the iframe's actual viewport (not the outer browser), MUI's responsive Grid behavior matches what end-users will see. Dialogs render as real modals in preview mode — Bombie generates a trigger button and an actual <Dialog>, and clicking any button inside dismisses it. In the builder canvas the dialog body stays flat so you can keep editing it.

If you want a starting point instead of an empty canvas, there are four sample templates you can load with one click: a sign-in card, a stats dashboard, a settings panel, and an FAQ + support page with an accordion and a dialog.

Who Bombie is for

Bombie isn't trying to replace Figma, and it isn't trying to be a no-code product builder you'd hand to a non-developer for production work. The README is explicit on that point: it's experimental, not production ready, and a couple of toolbar features (Upload JSON / Download JSON) are still placeholders.

What it's actually useful for:

  • Learning MUI's prop surface. New to Material-UI? Dragging a Button onto the canvas and flipping through variant, color, size, and disabled in a grouped form is faster than reading the docs page for each one.
  • Prototyping layouts. When you want to see whether a Grid+Card+Typography composition actually responds the way you think, Bombie's iframe preview shows you the truth at three breakpoints in seconds.
  • Demonstrating ideas. The JSON serialization means a layout is a single artifact you can paste into an issue or a chat.

If you're shipping a real product, keep writing components by hand. If you're exploring, teaching, or making a prototype, Bombie is meant to save you some friction.

The core idea: UI as a JSON tree

The thing that ties all of Bombie's features together is a single representation:

{
  id: "<uuid>",
  info: { tag: "Button", /* catalog metadata */ },
  props: { variant: "contained", color: "primary", children: "Save" },
  child: [ /* nested nodes */ ]
}
Enter fullscreen mode Exit fullscreen mode

Everything else falls out of that:

  • The drag-and-drop canvas is a recursive renderer over this tree.
  • The property editor writes back to the props of the selected node by id.
  • The live preview walks the same tree and emits clean MUI JSX without builder chrome.
  • Save / load is just JSON.stringify and JSON.parse.

I'll dig into the renderer split — builder vs preview — in the next post in this series, because it's where most of the interesting decisions live.

Tech stack at a glance

For anyone curious before cloning:

  • React 18 (createRoot bootstrap)
  • Material-UI (MUI)
  • react-dnd for the drag-and-drop primitives
  • Webpack 5 with HMR via webpack-dev-server
  • Jest for unit + component tests
  • ESLint + Prettier + Husky for the dev loop
  • Deployed on Vercel; GitHub Pages workflow included as an alternative

98% of the code is JavaScript. There's no TypeScript yet — partly because the JSON-tree shape is dynamic enough that strong types would have meant a lot of any early on, and partly because Bombie started as a personal experiment.

Try it, fork it, break it

The live demo is at bombie-three.vercel.app. The code is at github.com/amith-moorkoth/bombie under ISC. To run locally:

git clone https://github.com/amith-moorkoth/bombie.git
cd bombie
cp .env.example .env
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

The builder lives at http://localhost:8080/generate-component. On Windows you can double-click run.bat instead of running the three commands by hand.

In the next post I'll walk through the architecture: why there are two renderers (one for the builder, one for the preview), how the JSON-tree mutation helpers work, and what the iframe responsive preview actually does under the hood. If you want to follow along, star the repo or drop a comment with what you'd like to see next.

Links

Top comments (0)