Zap: Think Svelte but in Dart, Functional Reactive Web

What is Zap?

Zap is an amazing web framework for building reactive modular web components, It looks a lot like Svelte, but embraces all aspects of the Dart language.

With Zap, developers can build reactive web applications without the need to hustle with JavaScript, or any of its based framework.

Zap attempts to be a reasonably lightweight framework making it easy to write modular webapps in Dart. Zap also works well for websites with just a bit of interactivity, like this static page embedding some zap components.

The Zap file

Zap components are defined in .zap files. They consist of three sections, all of which are optional: scripts, styles and markup:

<script>
  // Dart code for the component
</script>
<style>
  /* you can put scoped component css here */
</style>

<!-- Markup as HTML goes here -->

Features

1. Easy to learn
2. Simple syntax
3. Built-in state management
4. Several UI components
5. Comes with its own animation framework
6. Rich developer-friendly easy to browse documentation
7. An animation framework, potentially similar to the one from Svelte.
8. Support for server-side rendering and hydration.
9. Tricks in the compiler to emit much less code.
10. Dozens of examples and code snippets
11. Rich DOM events
12. Clear straightforward logic
13. Built-in styling
14. Reactivity out of the box
15. Watchable manager
16. Prepare your project by the Zap online wizard

How does it look like?

• Basic block

<script>
  var name = 'world';
</script>

<h1>Hello {name}!</h1>

• Styling

<style>
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>

<p>Styled!</p>

License

Zap is released under the MIT License.

Resources

• https://simonbinder.eu/zap/
• https://github.com/simolus3/zap