Capstone is an experimental tablet+stylus device for creative professionals to develop their ideas. We used it as a playground to explore questions about digital tools for thinking and explaining, how to bring together desktop and touch interface metaphors, and what a power user might want from their digital tools in the coming five to ten years.

It was developed by Ink & Switch as part of our research in this area. While we're no longer developing Capstone, we learned a lot and wanted to share the code publicly.

Briefly, Capstone works as follows:

• You bring data into app - web pages, text snippets, and images - via a Chrome extension
• You organize your data visually on boards in the Capstone tablet app
• You can additionally write on boards for e.g. free-form notes and drawings

A screenshot showing the app in a trip planning use case:

The easiest way to get started is with a ChromeOS tablet device, such as the Google Pixelbook. Install these two apps on your ChromeOS tablet from the Chrome Web Store:

• Capstone
• Capstone Clipper

Then open the Capstone app and use the Capstone Clipper extension in Chrome to bring in content.

The cheatsheet describes how to use the app in detail.

It's possible to run degraded versions of Capstone on other devices - see below.

You can develop Capstone directly on ChromeOS tablets using the experimental Linux subsystem.

Linux is not yet included by default, so first install it according to these instructions.

Open the Terminal app and install NodeJS and Yarn. For example:

$ curl -sL https://nodejs.org/dist/v10.8.0/node-v10.8.0-linux-x64.tar.xz > nodejs.tar.xz
$ tar xJvf nodejs.tar.xz
$ export PATH=$HOME/node-v10.8.0-linux-x64/bin:$PATH
$ echo 'export PATH=$HOME/node-v10.8.0-linux-x64/bin:$PATH' >> ~/.bashrc
$ npm install -g yarn

Then proceed to "Building from source" below.

You'll need access to a standard NodeJS+Yarn install and a command line, but otherwise the instructions in "Building from source" below should work fine. See also "Pairing" on how to use two devices (e.g. a ChromeOS tablet and regular desktop) at the same time.

Note that running the main Capstone on something other than a ChromeOS tablet (including non-ChromeOS tablets like the Surface), will result in a degraded and/or buggy experience. But the clipper should work fine anywhere, and even the degraded app can be useful in development.

Clone into capstone on your development machine (ChromeOS tablet or otherwise) and run:

$ yarn install
$ yarn dev

Build artifacts are emitted to dist/capstone and dist/clipper for the main app and the web clipper extension, respectively.

To install these artifacts, open Chrome, navigate to chrome://extensions, and select "Load unpacked". Choose dist/capstone, then do this again for dist/clipper. This should install "Capstone" as an app and "Capstone Clipper" as a Chrome extensions on that device.

You'll need to do this on each device you want to use.

You can link a desktop and tablet app together for a smoother workflow. In particular you may want to capture data from your desktop in the course of normal web browsing, but read/organize/sketch on your tablet.

Do this, first on your tablet open the Capstone app, press right-shift to open the debug panel, and click "copy" to copy the workspace URL. Send this to your desktop out of band (e.g. via email). On your desktop, open the Capstone app and then paste the URL.

Once that's done, you can e.g. add files to the desktop app and see them instantly appear on your tablet, or clip web pages from your desktop and see them show up on the tablet.

Capstone uses a rendezvous-style cloud server to implement discovery and "peer-to-peer" messaging. (This was a workaround for technical issues we experienced with a true peer-to-peer stack.) By default, installs of the app use a shared cloud server we run on Heroku.

You can alternately deploy your own cloud server:

$ TODO

To configure an instance of your Capstone app to use a custom cloud server, instead of the default one:

$ TODO

Useful commands:

• yarn start: Start the development build
• yarn dev: Run yarn install and then build once in development mode
• yarn build: Run yarn install and then build once in production mode
• yarn build --env.>: Run the build for only the capstone app. Also works with yarn start and yarn dev
• yarn clean: Delete dist/* for a clean build
• yarn test: Same as yarn tests
• yarn repl: Start a TypeScript REPL
• yarn cloud: Run a development cloud server on localhost
• yarn format: Format all src/* code with prettier
• yarn capstone: Open the "capstone" Chrome app. Run yarn start first
• yarn clipper: Open the "clipper" Chrome app. Run yarn start first
• yarn tests: Open the "tests" Chrome app. Run yarn start first

<Content url={url} mode="preview" />

import * as React from "react"
import Content from "capstone/Content"
import Widget, { Doc, AnyDoc } from "capstone/Widget"

// These are the properties we expect our document to include
interface Model {
  count: number
}

export default Counter extends Widget<Model> {
  static reify(doc: AnyDoc): Model {
    return {
      count: Content.number(doc.count, 0), // Content.number ensures that doc.count is a number, and provides 0 as a default
    }
  }


  show({count}: Doc<Model>) {
    return (
      <button onClick={this.click}>{count}</button>
    )
  }

  click = () => {
    this.change(doc => {
      doc.count += 1
    })
  }
}

Content.register("Counter", Counter) // Register the widget with Content, so other components can render it.

  > peek()

  > peek(docid)

  > peek(docid,"p")