AppSeed App Generator — Turn any design into Fully-Coded Apps

3 min readSep 7, 2019

Hello Coders,

This article explains the core feature of the AppSeed service, with some real-life sample apps generated in different patterns (JAMstack, (Python) Flask, and Full-Stack) starting from the same flat HTML design. The whole idea behind our service is quite simple:

Any FLAT design can be transformed into a fully-coded app using automation tools.

After a few iterations over the service architecture, we decided to split the process into two big parts:

Phase #1 — Flat HTML parsing and conversion

Phase #2 — Boilerplate code provisioning with the new HTML design

App Generation — HTML parsing

At the moment this article is written (sept.2019), we are quite close to a real production-ready level, with more than 100 generated apps released as open-source products on Github. Implementing the HTML parsing and translation took more than one year, more than expected to be honest, but the result was very satisfying. A short-list with the parser features:

full control over the HTML DOM structure: traverse and locate elements
edit nodes and properties (href attributes, class names, the inner content of spans and divs)
replace the hard-coded text with variables
extract components for various template engines: PUG, Jinja, Blade, core PHP, Mustache
detect and extract the master layouts by comparing pages

Curious how we parse and extract components for various engines? Please access this article to find out more.

App Generation — Boilerplate Provisioning

All our boilerplates are releases as open-source projects and include a basic set of features, modules, and tools. For instance, Flask, Laravel, and NodeJS starters are using the same API nodes, JWT authentication feature, an ORM on top of a database and basic tooling (Webpack, Gulp) to use the app. The short-list with open-source boilerplates actively supported by us:

Nodejs Starter — Express / Nodejs starter with JWT authentication, SQLite database, Sequelize ORM, unit tests and basic tooling
Laravel Boilerplate — Basic Php / Laravel starter with JWT authentication and REST API
Flask Boierplate — Simple Flask Starter enhanced with JWT authentication and REST API

The automation process injects the template and components into boilerplates and the result is a tested fully-coded app.

Generated Sample #1 — Argon Design

The design used as input in our automation process is the Argon Design crafted by Creative-Tim. Using this nice UI kit as input, we generate three apps (JAMstack, (Python) Flask and Full-Stack.

**Argon Design — Generated in JAMstack** pattern

JAMstack Argon: sources, demo (MIT License)
Flask Argon: sources, demo (MIT License)
Full-Stack Vue Argon — using a two-tier architecture, where the backend is decoupled from the frontend. (MIT License)

Note: This app uses the VueJs version provided by the publisher and the automation part refers only the backend coupling with various backends: Flask, Laravel, and Nodejs: