@swim/ui implements a massively real-time user interface toolkit. Procedural styling, and a unified view hierarchy, make it easy to consistently animate—and efficiently render—mixed HTML, SVG, and Canvas components, enabling uniform tweening of everything from HTML attributes, to CSS styles, SVG and Canvas drawings, and custom parameters. @swim/ui is a part of the @swim/system framework.
The @swim/ui umbrella package depends on, and re-exports, the following component libraries:
- @swim/angle (npm, doc) – dimensional angle types with unit-aware algebraic operators, conversions, and parsers.
- @swim/length (npm, doc) – DOM-relative length types with unit-aware algebraic operators, conversions, and parsers.
- @swim/color (npm, doc) – RGB and HSL color types with color-space-aware operators, conversions, and parsers.
- @swim/font (npm, doc) – CSS font property types and parsers.
- @swim/transform (npm, doc) – CSS and SVG compatible transform types with unit-aware algebraic operators and parsers.
- @swim/interpolate (npm, doc) – interpolator types for blending between values, such as numbers, dates, angles, lengths, colors, transforms, shapes, arrays, structures, and other interpolators.
- @swim/scale (npm, doc) – scale types that map numeric and temporal input domains to interpolated output ranges, with support for continuous domain clamping, domain solving, range unscaling, and interpolation between scales.
- @swim/transition (npm, doc) – transition types that specify duration, ease, interpolator, and lifecycle callback parameters for tween animations.
- @swim/animate (npm, doc) – property-managing animator types that efficiently tween values between discrete state changes.
- @swim/dom (npm, doc) – CustomEvent and ResizeObserver polyfills.
- @swim/style (npm, doc) – CSS style types and universal style value parser.
- @swim/render (npm, doc) – renderable graphic types for SVG and Canvas compatible path drawing contexts, and Canvas compatible rendering contexts.
- @swim/constraint (npm, doc) – incremental solver for systems of linear layout constraints.
- @swim/view (npm, doc) – unified HTML, SVG, and Canvas view hierarchy, with integrated controller architecture, animated procedural styling, and constraint-based layouts.
- @swim/shape (npm, doc) – canvas shape views, with animated geometry and style properties.
- @swim/typeset (npm, doc) – canvas typesetting views, with animated text, layout, font, and style properties.
- @swim/gesture (npm, doc) – multitouch gesture recognizers, with kinematic surface modeling.
@swim/ui builds on the @swim/core framework; it has no additional dependencies.
For an npm-managed project, npm install @swim/ui to make it a dependency.
TypeScript sources will be installed into node_modules/@swim/ui/main.
Transpiled JavaScript and TypeScript definition files install into
node_modules/@swim/ui/lib/main. And a pre-built UMD script, which
bundles all @swim/ui component libraries, can be found in
node_modules/@swim/ui/dist/main/swim-ui.js.
Browser applications can load swim-ui.js, along with its swim-core.js
dependency, from the swimOS CDN.
<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-core.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.js"></script>
<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-core.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script>Alternatively, the standalone swim-system.js script may be loaded
from the swimOS CDN, which bundles @swim/ui together with all other
@swim/system
frameworks.
<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-system.js"></script>
<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>@swim/ui can be imported as an ES6 module from TypeScript and other
ES6-compatible environments. All component libraries are re-exported by
the umbrella @swim/ui module.
import * as swim from "@swim/ui";@swim/ui can also be used with CommonJS-compatible module systems.
All component libraries are re-exported by the umbrella @swim/ui module.
var swim = require("@swim/ui");When loaded by a web browser, the swim-ui.js script adds all component
library exports to the global swim namespace. The swim-ui.js script
requires that swim-core.js has already been loaded.
The swim-system.js script also adds all @swim/ui component library
exports to the global swim namespace, making it a drop-in replacement
for swim-ui.js when additional @swim/system frameworks are needed.