https://github.com/yoksel/html-tree

Document tree for given HTML with BEM errors and headers hierarchy
https://github.com/yoksel/html-tree

html html-tree

Last synced: over 1 year ago
JSON representation

Document tree for given HTML with BEM errors and headers hierarchy

• Host: GitHub
• URL: https://github.com/yoksel/html-tree
• Owner: yoksel
• Created: 2016-05-30T19:41:25.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T05:11:48.000Z (over 3 years ago)
• Last Synced: 2025-03-31T16:16:47.640Z (over 1 year ago)
• Topics: html, html-tree
• Language: JavaScript
• Homepage: http://yoksel.github.io/html-tree/
• Size: 2.38 MB
• Stars: 241
• Watchers: 10
• Forks: 59
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# html-tree

http://yoksel.github.io/html-tree/

---

**RU** | [EN ↓](#en)

## Генератор дерева на основе HTML-разметки.

Вставьте в левое поле HTML-код, и справа появится дерево документа в виде вложенных списков:

![Генератор дерева на основе HTML-разметки](/img/default-ru.png)

Бонусом делается простая проверка БЭМ-нотации и иерархии заголовков:

![Подсветка БЭМ-ошибок](/img/errors-ru.png)

Кликните по классу, чтобы подсветить его:



---

[RU ↑](#ru) | **EN**

## HTML Tree Generator

Insert the HTML code to the left textarea, and the document tree will appear on the right as nested lists:

![HTML Tree Generator](/img/default-en.png)

As a bonus there is a simple check of BEM notation and header hierarchy:

![Highlighting errors](/img/errors-en.png)

Click on class to highlight it: