Astro component that allows you to define HTML elements using JS Objects
MIT License
Create HTML elements using JS objects
This component was originaly created to interface with html elements inside of a component using props
slot
proptext
propinnerHTML
propclass
attribute uses class:list
directive (clsx)Install package:
npm i astro-json-element
Create Element:
---
import { Element } from 'astro-json-element';
const my_element = {
tag: "h1",
text: "Heading",
class: "heading",
id: "my-heading";
}
---
<Element {...my_element}/>
// <h1 id="my-heading" class="heading">Heading</h1>
Headless Pattern Example: <Pagination>
component
Basic Navbar Example:
Note: Styling using the
style
attribute or tailwindcss classes is easier and keeps your html and css together in the same file/object
---
import { Element } from 'astro-json-element';
const header = {
tag: "header",
style: "font-family:Arial;display:flex;justify-content:space-around;margin:1rem;border-radius:5px;background-color:white;border:3px solid purple",
_heading: {
tag: "h1",
text: "Purple",
style: "font-weight:bold;font-size:3rem;color:purple;"
},
_ul: {
tag: "ul",
style: "display:flex;align-items:center;gap:1rem;font-weight:bold;font-size:1.25rem;color:purple;",
_item1: {
tag: "li",
_link: {
tag: "a",
text: "Home"
}
},
_item2: {
tag: "li",
_link: {
tag: "a",
text: "Products"
}
},
_item3: {
tag: "li",
_link: {
tag: "a",
text: "About"
}
},
_item4: {
tag: "li",
style: "padding:.75rem 1rem;border-radius:5px;background-color:purple;color:white;",
_link: {
tag: "a",
text: "Contact"
}
},
}
}
---
<Element {...header}/>
first
first
text
before
slot
(default)after
innerHTML
last
last
Default: Elements are slot in at the center of the render order (5 of 9)
first
First element in Render Order
last
Last elemenet in Render Order
tag
Type: string
Default: div
Defines what HTML tag the element will be
slot
Type: string
Options: first
, before
, after
, last
Default: last
Controls where a _child element will be rendered inside of a parent json-element
see Render Order
text
Type: string
Set the text of an element, automatically escaped
innerHTML
Type: string
Set the innerHTML of an element, a string of HTML
defaults
Type: object
Define default props for _child elements
debug
Type: boolean
Default: false
If true the element will print its props to the console
...attrs
Type: object
Any other key/value pairs will be added as attributes to your element
---
const my_element = {
tag: "span",
text: "Text",
id: "my-element",
key: value,
}
---
<Element {...my_element}/>
// <span id="my-element" key="value">Text</span>
class
Type: set | object | array | string
The class attribute uses the class:list
directive (clsx):
---
const my_element = {
tag: "div",
class: ['This', 'is', 'a', 'test']
}
---
<Element {...my_element}/>
// <div class="This is a test">Text</div>
_[child]
Type: astro-json-element
astro-json-elements are recursive, you can create elements inside of elements by prefixing a key with _
NOTE: Some tags like h1-6 and p tags do not allow children and will slot the child element after the defined element inside the parent element
Example:
---
const header = {
tag: "header",
style: "display:flex;justify-content:center;background-color:white;border:3px solid purple",
_heading: {
tag: "h1",
text: "Purple Heading",
style: "font-weight:bold;font-size:3rem;color:purple;"
}
}
---
<Element {...header}/>
---
const list = {
tag: "ul",
style: "display:flex;align-items:center;gap:1rem;font-weight:bold;font-size:1.25rem;color:purple;",
_item1: {
tag: "li",
_link: {
tag: "a",
text: "Home"
}
},
_item2: {
tag: "li",
_link: {
tag: "a",
text: "Products"
}
},
_item3: {
tag: "li",
_link: {
tag: "a",
text: "About"
}
},
_item4: {
tag: "li",
style: "padding:.75rem 1rem;border-radius:5px;background-color:purple;color:white;",
_link: {
tag: "a",
text: "Contact"
}
},
}
---
<Element {...list}/>