DomB [domby] is a DOM Builder.
This is a simple cross-platform DOM generation library. It is a handy tool for creating templates and testing.
- Convenient JS-compatible syntax
- Cross-platform, works both in NodeJS and in the browser
- Support for ES2015 named imports
- Small footprint, 1KB after gzip
npm install domb
ES2015
import { div } from 'domb'
CommonJS
const { div } = require('domb')
Browser
<script src="https://unpkg.com/domb@latest/dist/domb.js"></script>
<script>
const { div } = domb
</script>
DomB can be used both in NodeJS and in the browser:
import { form, label, input, button } from 'domb'
const node = form({
action : 'https://google.com/search',
target : '_blank',
children : [
label([
'Search ',
input({ type : 'search', name : 'q' }),
]),
button('Find'),
],
})
// browser
document.body.append(node)
// nodejs
app.get('/form', (req, res) => res.send(node.outerHTML))
The node
variable is a DOM structure with the appropriate markup:
<form action=//google.com/search target=_blank>
<label>
Search
<input type=search name=q>
</label>
<button>Find</button>
</form>