AppSeed App Generator - Html Parsing

Hello Coder,

Thank you for landing on this page. This article explains how we use HTML parsing in the process of automatic app generation used to transform flat HTML designs into fully coded apps. For new comers, the idea behind the AppSeed service is a simple one:

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

To achieve this goal, we split our process into two big parts:


App Generator - Intro

The whole idea behind an app generator is to get a stable and tested code-base equipped with a few modules useful for a future project or app. Compared to other app generators, AppSeed aims to build apps using only flat HTML as input and based on this, will generate fully coded apps in modern pattern and architectures.

AppSeed is able to provide apps in two ways:

  • Through the visual app generator, users can combine the design, front end and back end technologies and the code is sent via email or listed on their dashboard in case they have an account on AppSeed platform.
  • Pre-built apps for various technologies and languages: JAMstack, Flask, Full-Stack, Admin Dashboards, Server-Side boilerplate code

In this article we will explain why we are using an HTML parser and how this tool help us to generate apps in different technologies and languages.


HTML Parser

Without an html parser, we were forced to manually process the HTML themes and extract the layouts, components, replace the hard coded texts with variables. In one sentence, this was a nightmare. Despite the fact that we spent around 1 year to develop the parser, the result was very satisfying. I will summarize here a short lis of features:

  • Load any html styled with Bootstrap, Bulma, Tailwind or Foundation
  • Full-control over the HTML DOM structure to edit nodes and attributes (href's, span texts, images src .. )
  • Components extraction for various template engines: PUG, Jinja, Blade
  • Master layout detection by comparing multiple pages.

HTML Parser screen-shots

The parser tool is implemented as an interactive console and the developer is able to move over the HTML Dom and visualize and later on, edit all elements.

Load the HTML page

HTML Parser - Load the HTML theme.

HTML Parser - Select the HTML page.

Select Components

HTML Parser - Select components.

Edit Elements

HTML Parser - Edit elements.

HTML Parser - Edit elements.


HTML Parsing Sample

The sample, extracted from Stellar HTML5Up theme is a simple navigation bar, extracted from this file


Pug version

nav#nav
  ul
    li
      a.active.newclass(href='https://appseed.us/html-parser').
        
        Introduction
        
    li
      a(href='#first').
        
        First Section
        
    li
      a(href='#second').
        
        Second Section
        
    li
      a(href='#cta').
        
        Get Started

PHP version

<nav id="nav">
 <ul>
  <li>
   <a class="active newclass" href="https://appseed.us/html-parser">
    <?php echo $var_1?>
   </a>
  </li>
  <li>
   <a href="#first">
    <?php echo $var_2?>
   </a>
  </li>
  <li>
   <a href="#second">
    <?php echo $var_3?>
   </a>
  </li>
  <li>
   <a href="#cta">
    <?php echo $var_4?>
   </a>
  </li>
 </ul>
</nav>

Apps Generated Samples

The HTML parser plays an important role in our app generation process and at the time we are writing this article (sep.2019) our public repository contains more than 120 apps, generated based on the HTML extracted and processed by the parser. The apps sorted by architecture, languages and typology:


Related Resources


Where to go from here?

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.