A low-profile component framework. 1 file. 1 class. ~350 lines of code. No build tools are required. Native web components. Ideal for JAM stacks. Identical on client & server. Composition oriented. Event delegation by default. Lots of examples. Building a component with Tonic starts by creating a function or a class. The class should have at least one method named render which returns a template literal of HTML. onic is a thin wrapper around web components. Web components require a name with two or more parts. So your class name should be CamelCased (starting with an uppercase letter). Tonic has no templating language, it uses HTML! But since HTML only understands string values, we need some help to pass more complex values to a component, for that we use this.html. There is no evidence that Virtual DOMs improve performance across a broad set of use cases, but it's certain that they greatly increase complexity. Tonic doesn't use them. Instead, we recommend incremental updates.

Features

  • 1 file. 1 class. ~350 lines of code
  • Identical on client & server
  • Event delegation by default
  • Composition oriented
  • Native web components
  • Ideal for JAM stacks

Project Samples

Project Activity

See All Activity >

Categories

Frameworks

License

MIT License

Follow Tonic

Tonic Web Site

Other Useful Business Software
Go From AI Idea to AI App Fast Icon
Go From AI Idea to AI App Fast

One platform to build, fine-tune, and deploy ML models. No MLOps team required.

Access Gemini 3 and 200+ models. Build chatbots, agents, or custom models with built-in monitoring and scaling.
Try Free
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of Tonic!

Additional Project Details

Programming Language

JavaScript

Related Categories

JavaScript Frameworks

Registered

2022-12-02