Render interfaces using pure functions and virtual DOM, kinda

Usage no npm install needed!

<script type="module">
  import notDeku from '';



Render interfaces using pure functions and virtual DOM

not-deku allows you to compose DOM structures with reuseable Components in a functional way. It is a drop-in replacement for Deku, which takes much inspiration from React and other functional-style view libraries.

This is an implementation of Deku in ~200 lines using virtual-dom. The full Deku v2 API is implemented, plus a little more.



Components are mere objects (not classes!) that at least implement a render() function.

/** @jsx element */
import { dom, element } from 'not-deku'

const App = {
  render () {
    return <div>
      Hello there, <button label={'Press me'}></button>

const Button = {
  render ({ props }) {
    return <button>{ label }</button>

// Render the app tree
render = dom.createRenderer(document.body)
render(<App />)

Components can have the following functions:

function render(model) => Element
function onCreate(model)
function onUpdate(model)
function onRemove(model)
function initialState(model)

// Where model is:
{ props, state, setState, context, dispatch, path }

// ...initialState, state, and setState are non-standard
// additions on top of the Deku v2 API.

The following things are implemented:

import { dom, element, string } from 'not-deku'

// dom:
dom.createRenderer(domElement: DOMNode, dispatch: ?any) => Function
render(element: Element, context: ?any) => void

// string:
string.render(element, context: ?any) => string

// element:
// (best used with JSX)
element(tag: string|Component, attrs: ?Object, ...children: Array<Element>) => Element


See Deku's documentation. not-deku takes the same API as deku (as of v2.0.0-rc6). You can use this while deku v2.0.0 is in development.

Extra features

These features are not part of deku, but are implemented here to prototype API additions to deku:

  • not-deku implements setState and state, which gets passed onto render() and other component lifecycle hooks. This was a feature of deku v1 which was removed in v2.
  • Conversely, Components can also have an initialState function.


Obviously taken blatant inspiration from Deku by the amazing Anthony Short and friends.

NB: This package is made as a proof-of-concept. While it's fully functional, it's not likely to be supported in the future.


not-deku © 2015+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).  ·  GitHub @rstacruz  ·  Twitter @rstacruz