Zero-dependency, build-free framework for the artisanal web.
Strawberry is a tiny frontend framework that gives you reactivity and composability. It does this with zero-dependencies, without a build step, and it fits in less than 3KB when gzipped.
<!-- Define Components --> <template name="plum-p"> <p style="color: plum"><slot /></p> </template> <!-- Initialize Strawberry --> <script> const data = sb.init(); </script> <!-- Use Components --> <plum-p sb-mark="message"> A plum colored p element! </plum-p> <!-- Dynamically Update Components --> <script> data.message = 'Hello, World!'; </script>
Strawberry is not an alternative to React, Vue, etc. It is an alternative to Vanilla JS. It is meant for simple, long lasting, low maintenance web pages, and tiny web apps.
For a basic setup, run this command in your terminal:
curl -so- https://raw.githubusercontent.com/18alantom/strawberry/main/setup.sh | bash
This will download and run a
that creates a folder with two files,
sb.min.js which consists of a simple "Hello, World!"
program using Strawberry.
To verify that setup succeeded, run the created
index.html file and check the console for the
The ideal way of using Strawberry is by copying the source code into your project directory as opposed to linking it.
But if you want to use a link, you can :)
To use a link, copy and paste the following script tag at the top of
Once that is done the
window.sb object should be defined.
Here's a toy example using Strawberry. An inventory app in which you can add items, move them in and out of a store, and view the movements.
Click the buttons in the bottom bar to view the different parts of the page.
Clicking the code will allow you to edit it in a
textarea, switching back to "View" will allow you to see
Why did you make this?
I wanted to write a simple website.
I restrained myself from using the usual frontend frameworks; for my purpose, their murder of dependencies felt like gross computational opulence.
These previously, on annual re-visitation, instead of showing me my
website after an innocuous
yarn build, have sprawled my
terminal with scary red text; portent of wasted hours.
If it ran then. It should've run now.
But as I wrote my website, the need to manually update the UI and redefine components took away from writing the site.
These are excerpts from the CoRecursive podcast on JSON vs XML.
And on web APIs.
...the browsers have actually gotten pretty good. The web standards thing have finally worked, and the web API is stable pretty much. Some of it’s still pretty stupid, but it works and it’s reliable.
Read the transcript on CoRecursive.