Skip to content
TKO v4.0.1
Playground llms.txt
Docs in progress TKO docs are in progress. Examples, API details, and migration notes are still being revised.

Installation

TKO ships two builds. Pick the one that fits your project:

BuildWhen to use
@tko/build.referenceNew projects. Modern features: TSX, ko-* attributes, native provider, strict equality.
@tko/build.knockoutMigrating from Knockout 3.x. Drop-in compatible. See the migration guide.

The examples below use build.reference. Swap in build.knockout if you need Knockout compatibility.

CDN

Section titled “CDN”

The fastest way to try TKO — no build step required.

<script type="module">
  import ko from 'https://esm.run/@tko/build.reference'


  const name = ko.observable('TKO')
  ko.applyBindings({ name })
</script>

Package manager

Section titled “Package manager”
Terminal window
npm install @tko/build.reference

Then import in your code:

import ko from '@tko/build.reference'

First binding

Section titled “First binding”

Here’s a complete, self-contained example you can save as an HTML file and open in a browser:

<!doctype html>
<html>
  <body>
    <div id="app">
      <label>
        Name
        <input data-bind="textInput: name" />
      </label>
      <p>Hello, <strong data-bind="text: name"></strong>.</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/@tko/build.reference/dist/browser.min.js"></script>
    <script>
      const ko = globalThis.tko
      ko.applyBindings({ name: ko.observable('TKO') }, document.getElementById('app'))
    </script>
  </body>
</html>

ko.applyBindings connects a view model to a DOM subtree. The textInput binding keeps the input in sync with the name observable, and the text binding displays its current value.

TypeScript

Section titled “TypeScript”

TKO is written in TypeScript. Types are included — no separate @types package needed.

import ko from '@tko/build.reference'


const name = ko.observable('TKO')  // inferred as Observable<string>
Section titled “What to read next”