The @swim/toolkit umbrella framework provides a set of frameworks for
building pervasively real-time user interface applications.
@swim/toolkit incorporates the
@swim/ui
real-time user interface toolkit, the
@swim/ux
real-time application framework, the
@swim/vis
real-time visualizations framework, and the
@swim/maps
real-time maps framework.
The Swim UI framework implements a user interface framework for pervasively
real-time applications. A unified view hierarchy, with builtin procedural
styling and animation, makes it easy for Swim UI components to uniformly
style, animate, and render mixed HTML, SVG, Canvas, and WebGL components.
Swim UI consists of the following component libraries:
@swim/ui
(npm,
doc) –
pervasively real-time user interface toolkit, with a unified view hierarchy
for HTML, SVG, and Canvas components, animated procedural styling, and
constraint-based layouts.
@swim/model
(npm,
doc) –
lifecycle-managed model hierarchy supporting dynamic scoping and service injection.
@swim/style
(npm,
doc) –
Font, color, gradient, shadow and related types and parsers.
@swim/theme
(npm,
doc) –
semantic looks and feels for mood-aware UX components.
@swim/view
(npm,
doc) –
unified HTML, SVG, and Canvas view hierarchy, with integrated controller
architecture, animated procedural styling, and constraint-based layouts.
@swim/dom
(npm,
doc) –
HTML and SVG views, with procedural attribute and style animators.
@swim/graphics
(npm,
doc) –
canvas graphics views, with procedurally animated shapes, and procedurally
styled typesetters.
@swim/component
(npm,
doc) –
componentized controller layer with application lifecycle and service management.
The Swim UX framework implements a user interface toolkit for advanced
real-time applications. Swim UX provides popovers, drawers, menus,
toolbars, controls, and other interactive application views and controllers.
Swim UX consists of the following component libraries:
@swim/ux
(npm,
doc) –
user interface toolkit for advanced real-time applications.
The Swim Visualizations framework implements seamlessly animated diagram
widgets, including gauges, pie charts, and line, area, and bubble charts.
Swim Visualizations consists of the following component libraries:
@swim/vis
(npm,
doc) –
procedurally animated, interactive diagrams, including gauges, pie charts,
and line, area, and bubble charts.
The Swim Maps framework implements real-time geospatial map overlays,
with support for Mapbox, Google, and Esri maps. Swim Maps consists of
the following component libraries:
@swim/maps
(npm,
doc) –
real-time geospatial map overlays, with support for Mapbox, Google, and Esri maps.
For an npm-managed project, npm install @swim/toolkit to make it a dependency.
TypeScript sources will be installed into node_modules/@swim/toolkit/main.
Transpiled JavaScript and TypeScript definition files install into
node_modules/@swim/toolkit/lib/main. And a pre-built UMD script, which
bundles all @swim/toolkit child frameworks, can be found in
node_modules/@swim/toolkit/dist/main/swim-toolkit.js.
Browser applications can load swim-toolkit.js, along with its swim-system.js
dependency, from the SwimOS CDN. The swim-toolkit.js bundle supersedes
swim-ui.js, swim-ux.js, swim-vis.js, and swim-maps.js—those scripts
need not be loaded when using swim-toolkit.js.
<!-- Development --><scriptsrc="https://cdn.swimos.org/js/latest/swim-system.js"></script><scriptsrc="https://cdn.swimos.org/js/latest/swim-toolkit.js"></script><!-- Production --><scriptsrc="https://cdn.swimos.org/js/latest/swim-system.min.js"></script><scriptsrc="https://cdn.swimos.org/js/latest/swim-toolkit.min.js"></script>
@swim/toolkit can be imported as an ES6 module from TypeScript and other
ES6-compatible environments. All child framework libraries are re-exported
by the umbrella @swim/toolkit module.
When loaded by a web browser, the swim-toolkit.js script adds all child
framework exports to the global swim namespace. The swim-toolkit.js script
requires that either swim-core.js or swim-system.js has already been loaded.
@swim/toolkit
The @swim/toolkit umbrella framework provides a set of frameworks for building pervasively real-time user interface applications. @swim/toolkit incorporates the @swim/ui real-time user interface toolkit, the @swim/ux real-time application framework, the @swim/vis real-time visualizations framework, and the @swim/maps real-time maps framework.
Umbrella Framework
The Swim Toolkit umbrella framework builds on the Swim Core framework, and provides the following top-level libraries:
Swim UI Framework
The Swim UI framework implements a user interface framework for pervasively real-time applications. A unified view hierarchy, with builtin procedural styling and animation, makes it easy for Swim UI components to uniformly style, animate, and render mixed HTML, SVG, Canvas, and WebGL components. Swim UI consists of the following component libraries:
Swim UX Framework
The Swim UX framework implements a user interface toolkit for advanced real-time applications. Swim UX provides popovers, drawers, menus, toolbars, controls, and other interactive application views and controllers. Swim UX consists of the following component libraries:
Swim Visualizations Framework
The Swim Visualizations framework implements seamlessly animated diagram widgets, including gauges, pie charts, and line, area, and bubble charts. Swim Visualizations consists of the following component libraries:
Swim Maps Framework
The Swim Maps framework implements real-time geospatial map overlays, with support for Mapbox, Google, and Esri maps. Swim Maps consists of the following component libraries:
Installation
npm
For an npm-managed project,
npm install @swim/toolkitto make it a dependency. TypeScript sources will be installed intonode_modules/@swim/toolkit/main. Transpiled JavaScript and TypeScript definition files install intonode_modules/@swim/toolkit/lib/main. And a pre-built UMD script, which bundles all @swim/toolkit child frameworks, can be found innode_modules/@swim/toolkit/dist/main/swim-toolkit.js.Browser
Browser
Browser applications can load
swim-toolkit.js, along with itsswim-system.jsdependency, from the SwimOS CDN. Theswim-toolkit.jsbundle supersedesswim-ui.js,swim-ux.js,swim-vis.js, andswim-maps.js—those scripts need not be loaded when usingswim-toolkit.js.Usage
ES6/TypeScript
@swim/toolkit can be imported as an ES6 module from TypeScript and other ES6-compatible environments. All child framework libraries are re-exported by the umbrella
@swim/toolkitmodule.CommonJS/Node.js
@swim/toolkit can also be used with CommonJS-compatible module systems. All component libraries are re-exported by the umbrella
@swim/toolkitmodule.Browser
When loaded by a web browser, the
swim-toolkit.jsscript adds all child framework exports to the globalswimnamespace. Theswim-toolkit.jsscript requires that eitherswim-core.jsorswim-system.jshas already been loaded.