A Hyperapp higher-order
that allows you to render views to an HTML string.
- User experience — Generate HTML on the server and send the markup down on the initial request for faster page loads. Built-in mounting feature in Hyperapp is allowing you to have a very performant first-load experience.
- Accessibility — Allow search engines to crawl your pages for SEO purposes.
- Testability — Check HTML validity and use snapshot testing to improve quality of your software.
Our first example is an interactive app from which you can generate an HTML markup. Go ahead and try it online.
import h app from 'hyperapp'import withRender from '@hyperapp/render'const state =text: 'Hello'const actions =textconst view = state actions<main><h1>statetext === '' ? '👋' : statetext</h1><input = = /></main>const main = state actions viewmain // => <main><h1>Hello</h1><input value="Hello"/></main>main // <= any sync or async action callmain // => <main><h1>World</h1><input value="World"/></main>
Looking for a boilerplate? Try Hyperapp Starter with pre-configured server-side rendering and many more.
npm install @hyperapp/render --save
You can find the library in
We support all ES5-compliant browsers, including Internet Explorer 9 and above,
but depending on your target browsers you may need to include
before any other code.
The library provides a few functions which you can use depending on your needs or personal preferences.
import withRender renderToString renderToStream from '@hyperapp/render'const main = state actions view containermain // => <string>// => <string>// => <string>main // => <stream.Readable> => <string>// => <stream.Readable> => <string>// => <stream.Readable> => <string>
renderToStream are available in
Node.js environment only (v6 or newer).
The library exposes three functions. The first of these is
withRender high-order function,
which adds the
toString action to be able to render your application to an HTML string at any given time.
This can be useful for server-side rendering or creating HTML snippets based on current application state.
import h app from 'hyperapp'import withRender from '@hyperapp/render'const state = name: 'World'const actions = nameconst view = state actions <h1>Hello statename</h1>const main = state actions viewmain // => <h1>Hello World</h1>main // <= any sync or async action callmain // => <h1>Hello Hyperapp</h1>
renderToString function generates HTML markup from any of your views without
app initialization. That could be useful to generate HTML markup from static views.
import renderToString from '@hyperapp/render'const Component = name <h1>Hello name</h1>// => <h1>Hello World</h1>
renderToStream function and
toStream equivalent return a
Readable stream that outputs an HTML string.
The HTML output by this stream is exactly equal to what
renderToString would return.
They are designed for more performant server-side rendering and here are examples how they could be used
with Express or Koa:
However, it is not safe to allow "user input" for node names or attribute keys because the library does not reject injection attack on markup due to performance reasons. See:
const Node = 'div onclick="alert()"'// => <div onclick="alert()" title="XSS">Hi</div>const attributes = 'onclick="alert()" title': 'XSS'// => <div onclick="alert()" title="XSS">Hi</div>const userInput = '<script>alert()</script>'// => <div title="XSS"><script>alert()</script></div>
Hyperapp Render is MIT licensed. See LICENSE.