DEV Community

Pavel
Pavel

Posted on • Edited on

I Got Tired of Build Tools, So I Built a JS Framework for Instant UI Prototyping

#javascript #programming #opensource

Ever have an idea for a UI component and just want to see it in your layout, right now, without fighting with build configs, imports, or CSS class names?

That frustration led me to build SlightStack, a tiny "boutique" framework with one main goal: to make UI prototyping as fast as thought. It's for developers who want to visually compose interfaces and see how elements fit together instantly.

The Magic: No Build Step, Just Node.js

The core of SlightStackis a lightweight Express server that kills the traditional front-end build step. When you run the project, it dynamically scans your component files (/components/button.js, /components/card.js, etc.) and bundles them for the browser on-the-fly.

What this means for you:

  1. Create a file: components/NewThing.js.
  2. Use it immediately: Write UI.NewThing() in your app.
  3. Refresh your browser. That's it. No imports, no config changes.

It’s powered by CommonJS and Node's fs module, making the whole experience feel like a simple, unified backend/frontend project.

Layouts That Just Make Sense

The real fun begins when you start composing. I wanted to stop thinking about flex-grow or justify-content and start thinking about intent.

SlightStack's layout system is dead simple. You have UI.row() and UI.stack() (for columns). To control how an element behaves inside them, you use a single method: .flex(grow, shrink, basis).

Building a responsive dashboard layout? It looks like this:

UI.stack().style({ height: '100vh' }).children(

    // A fixed header
    UI.stack().flex(0, 0, '60px'),

    // A "springy" main area that fills the rest of the space
    UI.row().flex(1, 1, 'auto').children(

        // A fixed sidebar
        UI.stack().flex(0, 0, '220px'),

        // A "springy" content area
        UI.stack().flex(1, 1, 'auto')
    ),

    // A fixed footer
    UI.stack().flex(0, 0, '40px')
);
Enter fullscreen mode Exit fullscreen mode

This code is incredibly readable. It lets you "sketch" complex, responsive layouts in seconds and see exactly how your components will fit and scale within the design.

Why I Built This

SlightStack isn't meant to be the next big thing. It's a tool for a specific job:

  • Visual Prototyping: Quickly build and iterate on UI ideas.
  • Component "Sandboxing": See how a new component looks and feels within a complex, real-world layout.
  • Fun: Recapture the joy of simple, direct coding without the layers of abstraction.

It’s the perfect sandbox for when you just want to create, compose, and see your work come to life without any friction.

If this sounds like your kind of workflow, feel free to check out the project on GitHub.

http://github.com/Xzdes/SlightStack

Happy prototyping

Top comments (0)