Allow reactive state to be declared closer to its usage in templates

[arif456]

Problem Statement

Svelte requires that all reactive state must be declared in the <script> block at the top of the component. This creates separation between state declarations and their usage in the template, making code harder to read and maintain, especially in large components.

Current situation:

<script>
  // All state declarations bunched at the top
  let modalOpen = $state(false);
  let tooltipVisible = $state(false);
  let dropdownExpanded = $state(false);
  let searchQuery = $state('');
  // ... potentially dozens more
</script>

<!-- 200 lines later -->
<div>
  {#if modalOpen}
    <Modal onclose={() => modalOpen = false} />
  {/if}
</div>

<!-- 100 lines later -->
<div>
  {#if tooltipVisible}
    <Tooltip />
  {/if}
</div>

You end up constantly scrolling between the script block and template to understand what state controls which part of the UI.

Desired Outcome

Enable scoped (preferably, but not required), localized state declarations within the template itself, keeping state close to where it's actually used.

This would allow developers to:

• Declare state inline, near its usage
• Scope state to specific sections of the template
• Avoid polluting the script block with UI-local toggles
• Make components more self-documenting and easier to refactor

Possible Implementation (Example)

One approach could be something like {#let} blocks:

<div>
  {#let modalOpen = $state(false)}
    <button onclick={() => modalOpen = true}>Open</button>
    {#if modalOpen}
      <Modal onclose={() => modalOpen = false} />
    {/if}
  {/let}
</div>

<div>
  {#let tooltipVisible = $state(false)}
    <span onmouseenter={() => tooltipVisible = true}>Hover</span>
    {#if tooltipVisible}
      <Tooltip />
    {/if}
  {/let}
</div>

But this is just one possible syntax. The core request is for some way to declare reactive state closer to its usage point in the template, preferably with appropriate scoping.

Use Cases

• Modal/dialog open/close states
• Tooltip visibility toggles
• Accordion/dropdown expanded states
• Form field-specific validation state
• Local loading/error states for UI sections
• Any UI state that's only relevant to a specific part of the template

Additional Notes

This isn't about replacing script-level state for shared/component-wide concerns—those should absolutely stay in <script>. This is about providing an option for truly local UI state that doesn't need to be component-wide.

P.S. This is a human-made idea written with AI, and proofread/edited by HI (Human Intelligence).

[yeupanhmaj]

How about separate your logic into a separate file?

[webJose]

I don't hate the idea, but I'll play the devil's advocate here.

1. The obvious one: Why do you make such large components? Ideally, break large components into smaller ones.
2. IDE's help. For example, VS Code can do split panes by pressing Ctrl+|. Then one pane is for the template, and the other pane is for the script.
3. Is scoping the variable a must? Because I am thinking/guessing the concept of scoping it to a piece of markup is more difficult to achieve.
4. If those reactive values are so scoped, can't you naturally break those scoped pieces into components or snippets? (Do snippets allow state declaration? If not, maybe it is more feasible to ask for variable declaration in snippets than this).

Overall, not a bad thing, in my untrained eye. Interested to hear other opinions.

[arif456]

All of those you mentioned are unnecessary and complicated workarounds for something that can be achieved MUCH MUCH simpler. Large components in a single file can make code more readable and make it easier to understand how data is flowing. VSCode pane takes up monitor space unnecessarily. Snippets in this case are totally uncalled for and boilerplatey.

The compiler already does the parsing and reconstruction of svelte code into js. It's just about taking a piece of declaration from the template area and putting it in the script block during the reconstruction. Simple as that.

As for scoping, I mentioned already, "preferable, but not required". Even without scoping, such a feature would DRASTICALLY improve the DX for mundane completely local states such showing a toolip or modal.

Thank you for your thoughts anyway.

[brunnerh]

Already addressed by this:

• Variable declarations in markup (replacing {@const ...} #16490

[arif456]

Thanks. This really is it.