JAMstack - 40+ Open-Source Apps generated with tools

Hello Coders,

We are proud to announce the release of 40+ JAMstack apps generated from various designs crafted by Creative-Tim, Html5Up and Pixelarity. For new comers, I will say a few words about our internal process to generate apps in various languages and technologies, using as input only flat HTML designs.

In a rush? All apps referenced in this article are listed in the JAMstack section of our repository.

App Generation Process

The first phase in this process is to parse and control the input HTML theme. In the whole process, this phase was the hardest part, i must say and took more than one year to have a stable and usable HTML parser that allows us to convert html files into usable templates for various engines: Jinja, Blade, PUG, Mustache and plain Php.


HTML Parsing Phase

The goal of this phase is to have 100% control over the HTML assets and structure and later, export and convert into production-ready templates, usable right away in Php, Python or Javascript boilerplates. I will list a few set of usable features that help us to integrate faster any HTML flat design:

  • normalize the HTML file to load the assets from a standard directories ( /assets/ [ img, js, css ] ) making the integration in webpack related tools much easier
  • edit / traverse the HTML tree
  • edit attributes like anchor href's, span texts, remove elements, edit class names
  • extract components for production use for various engines like PUG, Jinja2, Blade

When this phase is complete, the output is injected into existing boilerplates already equipped with tools and features like login, registration, database.


Boilerplate injection phase

Basically, all HTML assets and components are injected into boilerplates, already prepared and coded. The process, at time we speak ( sep.2019 ) supports the injection into JAMstack, Python and Javascript apps. This phase is followed by a minimum set of tests to detect if assets are loaded correctly, missing images and other small checks.

Now, enough with the talk, let's present some JAMstack apps generated using this workflow. I will start with the free tier and close the article with a few commercial apps.


JAMstack Paper Kit

The apps uses a design crafted by Creative-Tim, the well known web design agency. We decided to preserve the permissive license (MIT) and release this JAMstack app into the wild as a freebie:  demo, sources

JAMstack Paper Kit - Gif animated intro.
JAMstack Paper Kit - generated by AppSeed

JAMstack Now UI

Design Creative-Tim, license MIT: demo, sources

JAMstack Now UI - Gif animated intro.
JAMstack Now UI - generated by AppSeed

JAMStack Landed

CCA 3.0 License, with a design provided by HTML5 Up: demo, sources

JAMstack Landed - Gif animated intro
JAMstack Landed - generated by AppSeed

JAMstack Fractal

CCA 3.0 License - Open Source app built in JAMstack pattern: demo, sources

JAMstack Fractal - Gif animated intro.
JAMstack Fractal - generated by AppSeed

JAMstack Hologram

Commercial License - Open Source app built in JAMstack pattern: demo, sources

JAMstack Hologram - Gif animated intro.
JAMstack Hologram - Generated by AppSeed

JAMstack Hyperbolic

Commercial License - Open Source app built in JAMstack pattern: demo, sources

JAMstack Hyperbolic - Gif animated intro.
JAMstack Hyperbolic - Generated by AppSeed

JAMstack Reflex

Commercial License - Open Source app built in JAMstack pattern: demo, sources

JAMstack Reflex - Gif animated intro.
JAMstack Reflex - Generated by AppSeed

JAMstack Multiverse

Commercial License - Open Source app built in JAMstack pattern: demo, sources

JAMstack Multiverse - Gif animated intro.
JAMstack Multiverse - Generated by AppSeed

JAMstack Parallelism

Commercial License - Open Source app built in JAMstack pattern: demo, sources

JAMstack Parallelism - Gif animated intro.
JAMstack Parallelism - Generated by AppSeed

Next steps

Using this workflow we will generate apps for various technologies, widely used or cutting edge ones. In case you are an web agency and the ideea of using pre-built templates into your development process sounds good, don't hesitate to contact us

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.