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 400,000 packages pre-installed, including @scaife-viewer/scaife-widgets with all npm packages installed. Try it out:

var scaifeWidgets = require("@scaife-viewer/scaife-widgets")

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

@scaife-viewer/scaife-widgets v0.13.1

Scaife Widgets

front-end component library for the Scaife Viewer ecosystem

npm version github actions

This repository is part of the Scaife Viewer project, an open-source ecosystem for building rich online reading environments.


Everything is a component in the Vue sense but we try to distinguish between:

  1. Components - stateless, presentation-only components
  2. Widgets - stateful, Vuex-backed components
  3. Stores - Vuex state stores

Getting Started

$ yarn add @scaife-viewer/scaife-widgets

Import components and widgets like so:

import {
  // components
  // widgets
} from "@scaife-viewer/scaife-widgets";

Import css like so:

<style src='@scaife-viewer/scaife-widgets/dist/scaife-widgets.css'></style>

Import utils like so:

import { URN } from "@scaife-viewer/scaife-widgets";

Import constants like so:

import WIDGETS_NS from "@scaife-viewer/scaife-widgets";

Import and initialize the store like so:

import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import { scaifeWidgets } from "@scaife-viewer/scaife-widgets";


const store = new Vuex.Store({
  modules: {

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),

See _example/sample for more examples.

TextSizeWidget and TextWidthWidget

The TextSizeWidget and TextWidthWidget widgets must be coupled with a "reader" component along with the appropriate class: text-${textSize} or text-width-${textWidth}, respectively.


    :class="[`text-${textSize}`, `text-width-${textWidth}`]"
    <!-- reader here -->


Project setup:

$ yarn install

Compile and minify for production:

$ yarn build

Run unit tests:

$ yarn test


$ yarn lint

Develop scaife-widgets in parallel with a Scaife Viewer front end:

Within the scaife-widgets repo root directory:

$ yarn link
$ yarn watch

Within the Scaife Viewer front end directory:

$ yarn link "@scaife-viewer/scaife-widgets"
$ yarn serve

The watch script will re-build scaife-widgets when changes are made.

Since the module has been linked via yarn link, the front end's serve script will detect the changes and recompile the front end.

To revert to the canonical scaife-widgets installation within the Scaife Viewer front end:

yarn unlink "scaife-viewer/scaife-widgets"
yarn install --force
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