{"id":16175110,"url":"https://github.com/app-generator/html-parser","last_synced_at":"2025-03-19T00:31:07.044Z","repository":{"id":100503068,"uuid":"198027472","full_name":"app-generator/html-parser","owner":"app-generator","description":"Html Parser - Html to Pug, Jinja2, Blade Converter | AppSeed","archived":false,"fork":false,"pushed_at":"2021-01-26T16:27:57.000Z","size":2466,"stargazers_count":40,"open_issues_count":0,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-11T05:55:52.768Z","etag":null,"topics":["appseed","developer-tools","html-parser","open-source","pug"],"latest_commit_sha":null,"homepage":"https://appseed.us/developer-tools/html-parser","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/app-generator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-21T07:40:07.000Z","updated_at":"2024-08-12T19:51:15.000Z","dependencies_parsed_at":"2023-05-15T11:15:46.510Z","dependency_job_id":null,"html_url":"https://github.com/app-generator/html-parser","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fhtml-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fhtml-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fhtml-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fhtml-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-generator","download_url":"https://codeload.github.com/app-generator/html-parser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243955700,"owners_count":20374373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appseed","developer-tools","html-parser","open-source","pug"],"created_at":"2024-10-10T04:44:09.836Z","updated_at":"2025-03-19T00:31:07.038Z","avatar_url":"https://github.com/app-generator.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [HTML parser](https://appseed.us/developer-tools/html-parser)\n\nInteractive tool to convert flat HTML (themes or stand-alone files) to \u003ca href=\"https://pugjs.org/api/getting-started.html\"\u003ePug\u003c/a\u003e, \u003ca href=\"http://jinja.pocoo.org/docs/2.10/\"\u003eJinja2\u003c/a\u003e and \u003ca href=\"https://laravel.com/docs/5.8/blade\"\u003eBlade\u003c/a\u003e templates. \n\n\u003cbr /\u003e\n\n## What is an HTML Parser\n\nAccording to Wikipedia, Parsing or syntactic analysis is the process of analyzing a string of symbols, either in natural language or in computer languages, according to the rules of a formal grammar. The meaning of HTML parsing applied here consist into load the HTML, extract and process the relevant information like head title, page assets, main sections and later on, save the processed file.\n\n\u003cbr /\u003e\n\n## Tool Features\n \nThe 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. \n\n\u003cbr /\u003e\n\n## Use-cases \n\n - 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\n - edit / traverse the HTML tree  \n - edit attributes like anchor href's, span texts, remove elements, edit class names \n - extract components for production use for various engines like PUG, Jinja2, Blade\n - migrate legacy Bootstrap layouts to Bulma and Tailwind CSS frameworks \n\n\u003cbr /\u003e\n\n## HTML Parser Work-flow\n\n### Load the HTML theme / page\n \n![HTML Parser - Load the HTML theme.](https://github.com/app-generator/static/blob/master/developer-tools/html-parser-select-theme.jpg?raw=true)\n\n![HTML Parser - Select the HTML page.](https://github.com/app-generator/static/blob/master/developer-tools/html-parser-select-file.jpg?raw=true)\n\n\u003cbr /\u003e\n\n### Select Components\n\n![HTML Parser - Select components.](https://github.com/app-generator/static/blob/master/developer-tools/html-parser-select-component.jpg?raw=true)\n\n\u003cbr /\u003e\n\n### Edit Elements\n\n![HTML Parser - Edit elements.](https://github.com/app-generator/static/blob/master/developer-tools/html-parser-component-table-view.jpg)\n\n![HTML Parser - Edit elements.](https://github.com/app-generator/static/blob/master/developer-tools/html-parser-component-print-view.jpg?raw=true)\n\n\u003cbr /\u003e\n\n## Real life sample \n\nThe sample, extracted from [Stellar HTML5Up theme](https://github.com/app-generator/html-parser/tree/master/sample-stellar) is a simple navigation bar, extracted from [this file](https://github.com/app-generator/html-parser/blob/master/sample-stellar/index.html)\n\n- Index file: [original version](https://github.com/app-generator/html-parser/blob/master/sample-stellar/index.html) and [normalized version](https://github.com/app-generator/html-parser/blob/master/sample-stellar/index2.html)\n- [JSON descriptor](https://github.com/app-generator/html-parser/blob/master/sample-stellar/index2.json) is generated by the **HTML parser** tool and encapsulate the assets and resources used by the HTML files\n- Navigation component\n  - [HTML version](https://github.com/app-generator/html-parser/blob/master/sample-stellar/components/nav.html)\n  - [PUG version](https://github.com/app-generator/html-parser/blob/master/sample-stellar/components/nav.pug)\n  - [Jinja2 Version](https://github.com/app-generator/html-parser/blob/master/sample-stellar/components/nav.j2)\n  - [Php version](https://github.com/app-generator/html-parser/blob/master/sample-stellar/components/nav.php)\n  - [JSON descriptor](https://github.com/app-generator/html-parser/blob/master/sample-stellar/components/nav.json)\n  \n\n### Pug version\n\n```yaml\nnav#nav\n  ul\n    li\n      a.active.newclass(href='https://appseed.us/html-parser').\n        \n        Introduction\n        \n    li\n      a(href='#first').\n        \n        First Section\n        \n    li\n      a(href='#second').\n        \n        Second Section\n        \n    li\n      a(href='#cta').\n        \n        Get Started\n```\n\n\u003cbr /\u003e\n\n### PHP version\n\n```php\n\u003cnav id=\"nav\"\u003e\n \u003cul\u003e\n  \u003cli\u003e\n   \u003ca class=\"active newclass\" href=\"https://appseed.us/html-parser\"\u003e\n    \u003c?php echo $var_1?\u003e\n   \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n   \u003ca href=\"#first\"\u003e\n    \u003c?php echo $var_2?\u003e\n   \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n   \u003ca href=\"#second\"\u003e\n    \u003c?php echo $var_3?\u003e\n   \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n   \u003ca href=\"#cta\"\u003e\n    \u003c?php echo $var_4?\u003e\n   \u003c/a\u003e\n  \u003c/li\u003e\n \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n\u003cbr /\u003e\n\n## Projects built with this tool \n\nAll are open-source, with live DEMO. \n  - [JAMstack Fractal](https://github.com/app-generator/jamstack-fractal) - HTML5Up design coded in JAMstack pattern\n  - [JAMstack BigPicture](https://github.com/app-generator/jamstack-big-picture) - HTML5Up design coded in JAMstack pattern\n  - [JAMstack Landed](https://github.com/app-generator/jamstack-landed) - HTML5Up Landed design coded in JAMstack pattern\n  - [Flask Dashboard Material Design](https://github.com/app-generator/flask-material-dashboard) - Admin Dashboard with Material Design\n  - [Flask Dashboard NowUI](https://github.com/app-generator/flask-now-ui-dashboard) - Admin Dashboard with NowUI Design\n  - [Flask Dashboard Black](https://github.com/app-generator/flask-black-dashboard) - Open-Source Admin Panel\n  - [Flask Dashboard Argon](https://github.com/app-generator/flask-argon-dashboard) - Open-Source Admin Panel\n  - [Flask Dashboard Light](https://github.com/app-generator/flask-dashboard-light-bootstrap) - Open-Source Admin Panel\n\n\u003cbr /\u003e\n\n## License \u0026 Usage\n \n**The tool is not open-source**. For licenses, please contact [AppSeed](https://appseed.us/?ref=html-parser) - **support [ @ ] appseed.us**\n\n\u003cbr /\u003e\n\n---\n[HTML parser](https://appseed.us/developer-tools/html-parser) **tool** provided by **AppSeed**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fhtml-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-generator%2Fhtml-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fhtml-parser/lists"}