https://github.com/shadichy/dense-parser
NodeJS/JavaScript JSON-to-HTML parser
https://github.com/shadichy/dense-parser
commonjs dense dense-eco ecmascript es13 es6 html html5 javascript js json json-api node node-js nodejs parser
Last synced: 5 months ago
JSON representation
NodeJS/JavaScript JSON-to-HTML parser
- Host: GitHub
- URL: https://github.com/shadichy/dense-parser
- Owner: shadichy
- License: mit
- Created: 2022-10-14T07:27:55.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-23T06:34:34.000Z (about 3 years ago)
- Last Synced: 2025-07-19T05:52:02.738Z (5 months ago)
- Topics: commonjs, dense, dense-eco, ecmascript, es13, es6, html, html5, javascript, js, json, json-api, node, node-js, nodejs, parser
- Language: JavaScript
- Homepage:
- Size: 132 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DENSE JSON-to-HTML PARSER
This nodejs library parses json objects to html directly, with emmet abbreviation built in, helps increasing coding speed, reduce time messing with html
## Installation
### NodeJS, Deno
Just simply install the library using `npm`, `yarn` or `pnpm`
```sh
npm install dense-parser
yarn add dense-parser
pnpm i dense-parser
```
then
```js
const dense_parser = require("dense-parser") // Of course, you can use methods directly for short
```
### Browser
Add this to your html source
```html
```
or
```html
```
## Usage
To parse an object that represents a document, just pass it to `dense-parser`'s `parse` function
```js
const htmlObject = {
title: "This is title",
logo: "/path/to/your/favicon.png",
stylesheet: [
"/path/to/style1.css",
"/path/to/style2.css" ,
"/path/to/style3.css"
],
script: [
"/path/to/script1.js",
"/path/to/script2.js"
],
_: {
_: "This is a div inside body!"
}
}
console.log(dense_parser.parse(htmlObject))
```
Output:
```html
This is title
This is a div inside body!
```
(_You'll need to "beautify" it, for sure :)_)
To parse an object that represents a single html element, pass it to `parseElement` function
```js
const elementObject = {
tag: "span",
id: "someRandomTag",
class: ["dense"],
style: {
display: "block",
"border-radius": "10px",
width: "100%"
},
content: "div>p{This is the span content}",
title: "get this when your hover"
}
console.log(dense_parser.parseElement(elementObject))
```
Output:
```html
'This is the span content
'
```
(_A html beautify library is recommended :)_)
### Syntax
#### Element snippets
| Property | Type | Desciption
| ------------- | ------------- | ----------------------------------------------------------------- |
| `tag` | String | HTML tag
| `class` | String, Array | Element classes
| `style` | String, Object | Element CSS style
| `-`, `content` | String, Array, Object | Element inner content, can be single element or array of children
| `#` | String | Comment
And all other HTML element attributes inherited
#### Document snippets
Inherited from Element syntax with some additions
| Property | Type | Description
| ------------- | ------------- | ----------------------------------------------------------------- |
| `title` | String | Page title
| `desc` | String | Page desciption
| `logo` | String | URL to favicon path
| `preview` | String | URL to preview picture (for social network)
| `type` | String | Page type, can be `website` or `article`
| `lang` | String | Page language
| `keyword` | String, Array | Keywords for SEO
| `stylesheet` | String, Array, Object | Define document stylesheet (Object) or link to external CSS paths
| `script` | String, Array, Object | Create `` tag that contains JavaScript code (String) or link to external JavaScript paths ()
### For Dense-eco users
Execute `useDense()` after import
```js
const { parse, parseElement, useDense } = require("dense-parser")
useDense()
... // Do whatever
```