Skip to content
Html Parser - Flat HTML to PUG, Jinja2, Blade Converter | AppSeed
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md

README.md

HTML parser

Interactive tool to convert flat HTML (themes or stand-alone files) to Pug, Jinja2 and Blade templates.


Tool Features

The goal of this tool is to automate the UI integration into existing apps, written in different technologies and frameworks. Starting from flat HTML, the tool can be used by anyone to extract components, edit attributes and traverse the HTML tree using an interactive console.


Use-cases

  • 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
  • migrate legacy Bootstrap layouts to Bulma and Tailwind CSS frameworks

HTML Parser Work-flow

Load the HTML theme / 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.


Real life 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>

Projects built with this tool

All are open-source, with live DEMO.


Html parser tool provided by AppSeed

You can’t perform that action at this time.