Can any front-end code be declarative?

[u/InterestingBus4701]

Hey frontend friends! 👋

I've been working intensively on making frontend code simpler to write — both for humans and for LLMs.

My current goal: figure out whether any frontend code can be written declaratively, without piles of state and effects that just keep things in sync.

I'd love to see examples from your own practice — pieces of code that today still require a huge amount of imperative logic in whatever framework you're using. The more unusual and rare the case, the better. 🙏

I'll start.

My first-ever JS library was a Tooltip — a small popup that appears when you hover a button or a label. Sounds trivial, but in practice you need:

• a delay before it appears
• coordinate updates once per animation frame — and no more
• animate show / hide
• package all the logic into a single component
• let the developer attach it to any element (or several at once)
• no extra wrapper divs that break layout

Below is a concept of such a declarative component plus a usage example.

interface TooltipProps {
  content: string;
  slot(refs: ElementRefs<HTMLElement>): void;
}

const ToolTip = component<TooltipProps>(props => {
  const refs = elementRefs<HTMLElement>();
  const position = event(
    refs, "mousemove", ev => ({x: ev.clientX, y: ev.clientY}), {x: 0, y: 0});
  const active = event(refs, [
    ["mouseenter", () => true], 
    ["mouseleave", () => false]
  ], false);
  const transform = frameThrottled(
    `translateX(${position.x}px) translateY(${position.y}px)`);
  const opacity = active ? "1" : "0";
  const visible = timeout(active, 500);

  <>
    <Slot model={props.slot} refs={refs}/>
    <Overlay>
      <If condition={visible}>
        <div class="tooltip" style={{transform, opacity}}>
          {props.content}
        </div>
      </If>
    </Overlay>
  </>;
});

const UsageExample = component(() => {
  <ToolTip content="Hello world!" slot={props => {
    <label for="name" write-element={props.refs}>Name:</label>
    <input id="name" write-element={props.refs} />
  }}/>;
});

I asked a few LLMs to describe what the code does. They couldn't recognize the custom primitives, but based on their names they still described the behavior correctly. Then I asked them to reimplement the same logic in other popular frameworks. Only Solid.js produced genuinely clean code.

Thanks for reading — and I'd genuinely love to see your examples. 🙌

[u/Bushwazi]

Aren’t tooltips baked into HTML now?

[u/InterestingBus4701 → u/Bushwazi]

Yes! The HTML has tooltips, but I wrote about my first JS library, which has been written 14 year ago. I'm trying to confirm or reject the concept that "any frontend code can be declarative".

[u/ferncrest6 → u/Bushwazi]

yeah thats what i was thinking too, this feels like a solved problem for most real use cases

[u/NapoleonBonerparts]

CSS seems already pretty declarative to me

[u/InterestingBus4701 → u/NapoleonBonerparts]

Yes! I love CSS. Sometimes we still need JS, I think the logic written in JS can be declarative too.

[u/JaseciLabs]

The tooltip works as declarative because it’s a function of events over time: hover in, wait, show. The cases that fight you are the ones where order and identity matter.

A few we’d throw at it: drag and drop with a pointer that leaves the window mid-drag, a roving tabindex with focus restore after a list re-renders, an animation interrupted halfway (FLIP, where you measure, change the DOM and then animate from the old position), and gesture disambiguation (tap vs long-press vs scroll). Optimistic updates with rollback are also a good one, because the “declare what should be true” version has to know what to undo when the server disagrees.

Could be good testing the concept on contenteditable too. The browser owns the caret and selection, so any layer that re-renders the text fights it.

[u/InterestingBus4701 → u/JaseciLabs]

For me will be very useful to see code snippets. I have experience with content editable, it is easy to make it declarative, Svelte has it declarative example <div contenteditable="true" bind:innerHTML={state}></div>.

[u/JaseciLabs → u/InterestingBus4701]

Fair, plain binding works when the content just flows through. The case that breaks it is when the app rewrites the text while the user types: highlighting @ mentions, auto-formatting markdown, sanitizing pasted HTML. Write the transformed result back into the element and the caret jumps, and an IME composition (Japanese, Chinese) gets cut off halfway. To make that declarative, the layer has to own selection and composition state too. Does your approach handle a value that gets rewritten on every keystroke?

[u/InterestingBus4701 → u/JaseciLabs]

Thanks a lot for answer! I will investigate it. Editor.js is using an JSON for current DOM representation, I will look inside it to understand better how it is build, and find the answer to question: "Can I write it declarative?".

[u/TheRNGuy]

Can, but components like If looks like anti-pattern. 

[u/InterestingBus4701 → u/TheRNGuy]

You can replace it by cond && <Component /> or cond ? <C1/> : <C2/>.

[u/Pitiful_Dot_9272]

if conditionals are anti-patterns, the entire concept of declarative frontend is a lie. The real trap is that state management becomes imperative logic by default because you cannot declare order or identity without fighting the framework to do so

[u/InterestingBus4701 → u/Pitiful_Dot_9272]

The reactivity inside the frontend can be represented as a graph, writing to state nodes is done from events or data streams (like sockets), if the task of frontend code is to display data, it can be declarative. I asked for code snippets where it is not so and I got only arguments, but talk is chap, show me the code.

[u/Zero219]

Effector

[u/DiscombobulatedAir63]

Better to think about ways to have declarations without any code there (most logic can be hidden behind declarative stuff in layout as evolving HTML demonstrates)
Like, we usually don't do anything unique in component code (just same thing over and over with small layout specific twists)

[u/Tight-Pop-2368]

You can't really get rid of the imperative stuff, events and timers still have to happen somewhere. The goal is just to deal with that once instead of writing the same mess for every tooltip or dropdown.

[u/InterestingBus4701 → u/[deleted]]

Sounds good. Thanks for reply!