Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including knockout-jsx with all npm packages installed. Try it out:

require("knockout/package.json"); // knockout is a peer dependency. var knockoutJsx = require("knockout-jsx")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

knockout-jsx v1.0.3

Use JSX with Knockout.


Use JSX with Knockout.

JSX is not coupled to React. This little library will enable its use with Knockout instead.


Install knockout-jsx through npm.

npm install --save knockout-jsx

Once installed, knockout-jsx supports several types of imports.


import { registerJSXComponent } from 'knockout-jsx';


const { registerJSXComponent } = require('knockout-jsx');
// Or...
const knockoutJSX = require('knockout-jsx');


Referencing either dist/knockout-jsx.js or dist/knockout-jsx.min.js will add the API methods to ko.jsx.

<script src="node_modules/knockout-jsx/knockout-jsx.js"></script>
<!-- Or... -->
<script src="node_modules/knockout-jsx/knockout-jsx.min.js"></script>


Build Step

JSX must be transpiled to DOM API methods prior to using this libary. nativejsx is recommended. See the build tools section of the nativejsx readme for instructions on use with Webpack, Gulp, Grunt, or a shell command.


This library uses Knockout Components and registers components with ko.components.register().

import { registerJSXComponent } from 'knockout-jsx';

function CounterViewModel() {
    const self = this;
    self.counter = ko.observable(0);
    self.counterText = ko.computed(() => `Counter is at ${self.counter()}`);
    self.incrementCounter = () => self.counter(self.counter() + 1);

const template = (
        <div data-bind="text: counterText"></div>
        <button type="button" data-bind="click: incrementCounter"></button>

registerJSXComponent('counter', { viewModel: CounterViewModel, jsxTemplate: template });

Then, in the page markup:

    <h2>Here's a counter!</h2>
    <counter><!-- component will be rendered here by Knockout --></counter>


registerJSXComponent(name, component)

Registers a given component with Knockout. This is just a wrapper for ko.components.register.


  • [name] (String): The name of the component. This is the HTML element where a component will be rendered. For example, if a component with the name 'counter' is passed to this method, the component will be rendered wherever a <counter></counter> tag appears in the page markup. The value of name must be all lowercase.
  • [component] (Object): The component object. This must have the following properties:
    • [viewModel] (Function): The view model definition for the component.
    • [jsxTemplate] (Object): The JSX template object to use for the component. A build tool must convert the JSX markup to DOM API methods prior to calling registerJSXComponent. As such, this should actually be an Element.


Run npm run test to start the Karma test runner with PhantomJS. To just run the tests once, run npm run test-once.


Licensed under the MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free