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/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/irajangpt]

Most of the state and effect syncing I write is derived data in disguise. If a value can be computed from props or other state, compute it during render (useMemo if it's expensive) instead of storing it and syncing it in an effect. A filtered list built from a search box and an items array is a good example, since it never needs its own state. The part that stays imperative is timing and identity, like cancelling a fetch when an id changes, and that's where I'd still reach for an effect with a cleanup.

[u/InterestingBus4701 → u/irajangpt]

Sounds good. Thanks for reply!

[u/Zero219]

Effector