Skip to main content
Version: 5.x


single-spa-html is a helper library for mounting raw HTML and web components as single-spa applications or parcels.


npm install --save single-spa-html

# or
yarn add single-spa-html

Alternatively, you can use single-spa-html from a CDN as a global variable:

<script src=""></script>

Note that you might want to lock down the package to a specific version. See here for how to do that.


Via npm

import singleSpaHtml from 'single-spa-html';

const htmlLifecycles = singleSpaHtml({
template: '<x-my-web-component></x-my-web-component>',

export const bootstrap = htmlLifecycles.bootstrap;
export const mount = htmlLifecycles.mount;
export const unmount = htmlLifecycles.unmount;

Via cdn

Example usage when installed via CDN:

const webComponentApp = window.singleSpaHtml.default({
template: props => `<x-my-web-component attr="${props.attr}"></x-my-web-component>`,

name: 'name',
app: webComponentApp,
activeWhen: () => true

API / Options

single-spa-html is called with an object that has the following properties:

  • template (required): An HTML string or a function that returns a string or promise that resolves a string. The function will be called with the single-spa custom props. The returned string is injected into the DOM during the single-spa mount lifecycle.
  • domElementGetter (optional): A function that is given the single-spa props and returns the dom element container into which the HTML will be injected. If omitted, a default implementation is provided that wraps the template in a <div> that is appended to document.body.