https://github.com/dashpilot/data-to-div
https://github.com/dashpilot/data-to-div
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dashpilot/data-to-div
- Owner: dashpilot
- Created: 2023-08-27T17:48:04.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-27T18:36:37.000Z (almost 3 years ago)
- Last Synced: 2025-02-15T02:06:33.206Z (over 1 year ago)
- Language: JavaScript
- Size: 1.68 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```
npm install data-to-div
```
# Data to div
DataToDiv automatically generates html based on a data object. What's more: it can also generate data based on html that was previously generateed with DataToDiv :-) This can be useful for quick prototyping or even an on-page cms (if you change the html contents on the page, you can later convert it back to data to save the changes!).
## SSR and CSR
This module supports both server-side rendering and client-side rendering, so you could just supply data and generate HTML pages on the server, than allow the user to make changes and rteurn the data (client-side).
## How does it work?
run.js contains a demo, but here's the rundown:
### toDiv
toDiv converts the data to HTML
```js
// import the module
import {toDiv, toData} from "./index.js"
import * as fs from "fs"
if (!fs.existsSync('./public')){
fs.mkdirSync('./public');
}
// provide the data
const data = {
"intro": {
"title": "Hello world",
"body": "Lorem ipsum dolor site amet",
},
"posts": [{"title":"First post", "body":"Lulala"}, {"title":"Second post", "body":"Lorem lala"}]
};
// the config object allows you to map html tags to keys in the data
const config = {
"title": "h1",
"body": "p",
}
// run it
var html = toDiv(data, config);
// return the generated html
console.log(html);
```
### toData
toData converts the HTML back to data
```js
console.log(JSON.stringify(toData(html)));
```
## Press the :star: button
Don't forget to press the :star: button to let me know I should continue improving this project.