Install @publicspace/serial with npm:
npm install @publicspace/serialImport serial:
import serial from "@publicspace/serial";htmlToJson usage:
const json = Serial.htmlToJson(`
<h1>
Hello, World!
</h1>
`);jsonToHtml usage:
const html = Serial.jsonToHtml([
{
tag: "h1",
children: [
{
type: "text",
content: "Hello, World!"
}
]
}
]);Import the module:
import Serial from "@publicspace/serial";Convert HTML to JSON:
const html = `
<div class="container">
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</div>
`;
const json = Serial.htmlToJson(html);
console.log(json);Convert entire HTML document to JSON:
const html = `
<html data-theme="theme">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body id="top" class="hero-container animation">
<main>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</main>
</body>
</html>
`;
const json = Serial.htmlToJson(html, true);
console.log(json);Convert JSON to HTML:
const json = [
{
tag: "html",
attributes: {
"data-theme": "theme"
},
children: [
{
tag: "head",
children: [
{
tag: "meta",
attributes: {
charset: "UTF-8"
}
},
{
tag: "meta",
attributes: {
name: "viewport",
content: "width=device-width, initial-scale=1.0"
}
},
{
tag: "title",
children: [
{
type: "text",
content: "Document"
}
]
}
]
},
{
tag: "body",
attributes: {
id: "top",
class: "hero-container animation"
},
children: [
{
tag: "main",
children: [
{
tag: "h1",
children: [
{
type: "text",
content: "Hello, World!"
}
]
},
{
tag: "p",
children: [
{
type: "text",
content: "This is a paragraph."
}
]
}
]
}
]
}
]
}
];
const html = Serial.jsonToHtml(json);
console.log(html);