JAMstack - 40+ Open-Source apps generated with tools
Tags: jamstack, automation, appseed
Published: 2019-09-02 19:54:05

---
title: JAMstack - 40+ Open-Source apps generated with tools
published: true
description: 40+ JAMstack apps (free & commercial) built with automation tools 
cover_image: https://github.com/app-generator/static/blob/master/products/jamstack-parallelism-intro.gif?raw=true
tags: jamstack, automation, appseed
---

Hello coders,

In this article, I will present an automatized workflow used to release 40+ **[JAMstack open-source apps](https://appseed.us/static-site)** generated on top of existing designs crafted by well-known web design agencies (Creative-Tim, HTML5Up and Pixelarity ). 
I decided to build an automation workflow, based on my freelancing experience from the last two years, mostly based on the feedback and clients requirements:

- The clients constantly require a variety of designs to choose from
- Apps should be delivered in modern technologies 
- Legacy apps migration to newer technologies using low budgets

> Thank you! **Content provided by [App Generator](https://appseed.us)**.

---

To solve all those problems and challenges I've built a semi-automated workflow:

- Parse the flat HTML design with component extraction and translation to various template engines (Jinja2, PUG, Blade, Php native .. etc)

- Inject the processed design into existing boilerplates (Php, Python, Javascript, JAMstack, NodeJS)

- Execute automatically a minimum set of tests 

Using this workflow, only for Php apps at the beginning, I discovered a huge similarity when I decided to build JAMstack apps or Python apps. The initial phase was identical for the generation process for all technologies, only the injection phase was slightly different, but not much. 

> Note: The [HTML parser](https://dev.to/sm0ke/html-parser-developer-tools-5d85) tool is explained in a previous [article](https://dev.to/sm0ke/html-parser-developer-tools-5d85).

All JAMstack apps generated using this process are open-source, published on Github, 7 apps are free and 35 are commercial. The numbers, based on the design providers are: 

- [Creative-Tim](https://www.creative-tim.com/?ref=appseed) - 4 apps released under the MIT license
- [HTML5 Up](https://html5up.net/?ref=appseed) - 3 apps with [CCA 3.0](https://html5up.net/license) License  
- [Pixelarity](https://pixelarity.com/?ref=appseed) apps - 35 - commercial license

---
## What is [JAMstack](https://jamstack.org/)

A short note for newcomers, [JAMstack](https://jamstack.org/) stands for JavaScript, APIs, and Markup. The term was coined by Mathias Biilmann to describe a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.  

---

## [Eleventy Soft UI](https://appseed.us/product/eleventy-soft-ui)

[Eleventy Soft UI](https://appseed.us/product/eleventy-soft-ui) is an Eleventy adaptation of **Soft UI Design System** (a user-friendly and beautiful design system based on Bootstrap 5), including a Blog system that uses Prismic CMS for content management. **Soft UI Design System** is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using SASS files and classes.

---

- [Eleventy Soft UI](https://appseed.us/product/eleventy-soft-ui) - product page
- [Eleventy Soft UI](https://eleventy-soft-ui.appseed-srv1.com/) - LIVE Demo

---

![Eleventy Soft UI Design - Open-source SSG starter provided by AppSeed in 11ty on top of Soft UI Design.](https://user-images.githubusercontent.com/51070104/128602712-4b38f18d-2154-4899-a796-aec0f7435329.png)

---

## [JAMstack Paper Kit](https://jamstack-paper-kit.appseed.us/)

**MIT License**, design by Creative-Tim : [demo](https://jamstack-paper-kit.appseed.us/), [sources](https://github.com/app-generator/jamstack-paper-kit)

![JAMstack Paper Kit - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-paper-kit-intro.gif?raw=true)

---

## [JAMstack Argon Design](https://jamstack-argon-design.appseed.us/)

**MIT License** - Open Source app built in **JAMstack** pattern: [demo](https://jamstack-argon-design.appseed.us/), [sources](https://github.com/app-generator/jamstack-argon-design-system)

![JAMstack Argon Design - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-argon-design-intro.gif?raw=true)

---

## [JAMstack BigPicture](https://jamstack-big-picture.appseed.us/)

**[CCA 3.0 License](https://html5up.net/license)**, design by HTML5 Up: [demo](https://jamstack-big-picture.appseed.us/), [sources](https://github.com/app-generator/jamstack-big-picture)

![JAMstack BigPicture - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-html5up-bigpicture-intro.gif?raw=true)

--- 

## [JAMstack Fractal](https://jamstack-fractal.appseed.us/)

**[CCA 3.0 License](https://html5up.net/license)**, design by HTML5 Up: [demo](https://jamstack-fractal.appseed.us/), [sources](https://github.com/app-generator/jamstack-fractal)

![JAMstack Fractal - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-html5up-fractal-intro.gif?raw=true)

---

## [JAMstack Lens](https://jamstack-lens.appseed.us/)

**Commercial License**, design by Pixelarity: [demo](https://jamstack-lens.appseed.us/)

![JAMstack Lens - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-lens-intro.gif?raw=true)

---

## [JAMstack Drift](https://jamstack-drift.appseed.us/)

**Commercial License**, design by Pixelarity: [demo](https://jamstack-drift.appseed.us/)

![JAMstack Drift - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-drift-intro.gif?raw=true)

---

## [JAMstack Parallelism](https://jamstack-parallelism.appseed.us/)

**Commercial License**, design by Pixelarity: [demo](https://jamstack-parallelism.appseed.us/)

![JAMstack Parallelism - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-parallelism-intro.gif?raw=true)

---

## [JAMstack Reflex](https://jamstack-reflex.appseed.us/)

**Commercial License**, design by Pixelarity: [demo](https://jamstack-reflex.appseed.us/)

![JAMstack Reflex - Gif animated intro.](https://github.com/app-generator/static/blob/master/products/jamstack-reflex-intro.gif?raw=true)

--- 

## [JAMstack Apps](https://github.com/app-generator/jamstack)

The full list can be found [here](https://github.com/app-generator/jamstack) along with the links to DEMO & Sources and license type for each app

---

## [JAMstack](https://jamstack.org/) resources

- [JAMstack](https://jamstack.org/) - read more about **JAMstack** pattern
- Blog articles related to [JAMstack](https://blog.appseed.us/tag/jamstack/)
- A curated list with production-ready [JAMstack Apps](https://appseed.us/apps/jamstack)

--- 

Thank you for reading & Happy coding!