At some point, my markup started feeling… heavy.

Not slow. Not broken. Just hard to look at.

At some point, it stopped feeling like I was writing UI…
and started feeling like I was managing class strings.

The Problem

Modern CSS tooling solves a lot of problems.

But it also introduces some friction—especially at scale.

Verbosity

You end up stacking utilities:

<div class="flex flex-col items-center justify-center h-screen bg-gradient-to-r from-purple-400 to-pink-500">

It works. It’s powerful. But it’s a lot to parse.

Readability

When everything is a class:

• layout
• spacing
• color
• behavior

…it all blends together.

You stop seeing intent and start reading implementation.

Scaling UI Systems

As projects grow, this turns into:

• long, unreadable markup
• repeated patterns everywhere
• small changes requiring multiple class edits

It works—but it starts to feel messy.

The Idea

What if UI wasn’t driven by long class strings?

What if it looked more like this:

<div flex="col" height="full" grad="candy-grape" centered>

Instead of stacking utilities, each attribute describes intent directly:

• flex="col" centered → layout
• height="full" → sizing
• grad="candy-grape" → styling

Example

Here’s a simple comparison.

Tailwind-style

<div class="flex flex-col items-center justify-center h-screen bg-gradient-to-r from-purple-400 to-pink-500">
  <h1 class="text-2xl font-bold text-white">Hello</h1>
  <button class="mt-4 px-4 py-2 bg-black text-white rounded-md">Click me</button>
</div>

Juice

<div flex="col" height="full" grad="candy-grape" centered>
  <h1 fontSize="xl" fontColor="white">Hello</h1>
  <button margin-top="4rem" padding="x-4 y-2" bgColor="black" fontColor="white" rounded="md">
    Click me
  </button>
</div>

The difference isn’t just shorter code.

Each attribute expresses intent directly, instead of stacking utilities together.

Interactions & Animations

This pattern extends beyond layout and styling.

<button hover="scale-up" motion="fade-in">
  Click me
</button>

Interactions and animations follow the same idea:

• attributes describe behavior
• not just appearance

What Juice Is

Juice is an attribute-based UI system.

It’s designed to make UI code more:

• expressive
• readable
• scalable

Core Ideas

• Layout via attributes
• Styling via attributes
• Animations via attributes
• Works standalone or with frameworks
• Optional JS control when needed

Why I Built It

I wasn’t trying to replace existing tools.

I was trying to solve a personal problem:

I wanted my UI code to feel as clean as my logic.

I like systems.
I like consistency.

And I didn’t like how styling started to feel like a wall of strings.

So I started experimenting with attributes.

That turned into patterns.
Then conventions.
Then a system.

Who This Is For

Juice is probably a good fit if you:

• build apps or dashboards
• use Tailwind (or similar) but feel the verbosity
• care about readability as your project grows

It’s probably not for you if you prefer:

• strict class-based systems
• or fully abstracted component libraries

Current State

Juice is currently in alpha.

That means:

• things will change
• APIs may evolve
• ideas are still being refined

But the core concept is solid enough to start sharing.

Try It / Feedback

This is still early, and I’m actively shaping it.

If you’ve ever felt the pain of class-heavy UI code, I’d love your feedback:

• Does this feel clearer or just different?
• Would you actually use this in a project?

Repo:
👉 Juice

This isn’t meant to replace everything.

It’s just another way to think about UI—and I’m curious if it clicks for anyone else the way it did for me.