All workProject 04 of 05

SQL without the syntax. Build an arbitrarily nested tree of AND and OR conditions by clicking, and watch the same query render three ways at once, as SQL, as a MongoDB filter and as a GraphQL where input.

Client
Studio product
Year
2026
Role
Product, design and build
Status
Live at nexusdbx.vercel.app
Built with
Next.js, TypeScript, Immer, dnd-kit, Radix UI, Tailwind CSS

The brief

Nested filters are where queries stop being readable. Three levels of AND inside OR and you are counting brackets instead of thinking about data.

Most visual builders solve that by locking you to one database. This one treats the filter as the real thing and the query language as an output format.

The hard part

One filter tree has to produce three correct dialects, and SQL, MongoDB and GraphQL disagree about almost everything once you nest them. Undo made it harder: users edit a tree, not a list, so history is stored as Immer patches rather than snapshots of state.

What we built

  • A visual filter builder: add rules, nest groups, drag to reorder.
  • Three query outputs at once, in SQL, MongoDB filter syntax and GraphQL where input.
  • Schema-driven inputs, where the field type picks the widget: date picker, enum dropdown, tag input, boolean toggle, number range, regex.
  • Custom data import, by pasting a JSON array or uploading a file, with field types inferred automatically.
  • Live results: the filter runs against the data and matched rows appear in a resizable, paginated table with CSV export.
  • Fifty steps of undo and redo, built on Immer patches.
  • Saved presets, a live complexity score for query depth, dark and light themes, and a documentation site.
Open NexusDB Explorer

Where it is now

  • Live at nexusdbx.vercel.app
  • Documented at nexusdbx.vercel.app/docs
Next projectTerminal NoirTwo published VS Code extensions: a pre-commit scanner and an AI code reviewer.

Tell us what you want to exist. We'll reply with how we'd build it, roughly how long it takes and what it costs.