node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »


preact element logo

⚡️ A better element creation function (h) for preact

Build status NPM version Dependency Status License Js Standard Style


  • You want to use preact with no build tool
  • You are not in favor of extending the language with non-standard extensions

Why not preact's h?

Creating and reading dom structures is the bread and butter in creating UI. It should have minimal boilerplate. Thats what this library does - removing boilerplate.

// preact 
h('div', null,
  h('p', null, 'Hello World!')
// preact-element 
  p('Hello World!')

Getting Started

With preact-element installed (using your favourite package manager), you can then import it. Each element in the DOM is exposed as a function when requiring preact-element.

Plain commonjs

const h = require('preact-element') // -> h.div() 


const { div, h1 } = require('preact-element')


import { div, h1 } from 'preact-element'

Use it!

import { div, h1, h2, h3, button, ul, li } from 'preact-element'
import { render } from 'preact'
const App = ({ library }) => div(
  h1({ class: 'bold' }, library),
  h2({ id: 'subitle' }, 'Preact is a fast, 3kb alternative to React, with the same ES2015 API'),
  button({ href: '' }, 'Learn More'),
  ul(['preact', 'small', 'es2015', 'fast'].map(key => li(key)))
  h(App, { library: 'Preact' }),


attributes and children are optional.

createElement(tag, attributes?, ...children?)

[tag](attributes?, ...children?)

Where as tag is one of the html tags or svg tags.


preact-element © Fabian Eichenberger, Released under the MIT License.
Authored and maintained by Fabian Eichenberger with help from contributors (list).

GitHub @queckezz · Twitter @queckezz