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
@swim/ux with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
@swim/ux implements seamlessly animated user interface widgets, including gauges, pie charts, line, area, and bubble charts, and geospatial map overlays. These fully encapsulated widgets can be embedded into any web application framework, or directly into any web page. @swim/ux is a part of the broader @swim/system framework.
The @swim/ux umbrella package depends on, and re-exports, the following component libraries:
For an npm-managed project,
npm install @swim/ux to make it a dependency.
TypeScript sources will be installed into
node_modules/@swim/ux/lib/main. And a pre-built UMD script, which
bundles all @swim/ux component libraries, can be found in
Browser applications can load
swim-ux.js, along with its
swim-ui.js dependencies, 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> <script src="https://cdn.swimos.org/js/latest/swim-ux.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> <script src="https://cdn.swimos.org/js/latest/swim-ux.min.js"></script>
Alternatively, the standalone
swim-system.js script may be loaded
from the swimOS CDN, which bundles @swim/ux together with all other
<!-- 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/ux can be imported as an ES6 module from TypeScript and other
ES6-compatible environments. All component libraries are re-exported by
import * as swim from "@swim/ux";
@swim/ux can also be used with CommonJS-compatible module systems.
All component libraries are re-exported by the umbrella
var swim = require("@swim/ux");
When loaded by a web browser, the
swim-ux.js script adds all component
library exports to the global
swim namespace. The
swim-ui.js have already been loaded.
swim-system.js script also adds all @swim/ux component library
exports to the global
swim namespace, making it a drop-in replacement
swim-ux.js when additional @swim/system frameworks are needed.