Installation

Prerequisites#

Use Node.js, npm, and an app build tool that resolves package imports and CSS imports. Install in the folder containing your project’s package.json. Add JavaScript examples to your app entry file and run your development server.

1. Install the npm package#

Community

npm install @syidax/core@6.0.1

@syidax/core · npm ↗

Pro

npm install @syidax/core-pro@6.0.1

@syidax/core-pro · npm ↗

Choose one edition. Both editions install from public npm; Pro features require a valid product license. When switching to Pro, use the same Pro package for CSS, components, and license imports.

Using Core Pro with Chart/Grid

npm install @syidax/core@npm:@syidax/core-pro@6.0.1 @syidax/advanced-pro@1.0.1

This combination installs Core Pro under the @syidax/core alias, so use @syidax/core/… for its CSS, component, and license imports. Use @syidax/advanced-pro/… for Chart/Grid. For Chart/Grid Community, replace @syidax/advanced-pro@1.0.1 in the command with @syidax/advanced@1.0.1. Chart and Grid share one package.

2. Link JavaScript and CSS#

Import CSS and register the component in your app’s JavaScript entry file.

import '@syidax/core/css/core';
import { defineCustomElement } from '@syidax/core/components/sy-button.js';

defineCustomElement();

Add this markup to your app HTML. Use sy-theme-dark for the dark theme.

<div class="sy-theme sy-theme-light">
  <sy-button variant="primary">Save</sy-button>
</div>

3. Connect a Pro license#

For a standalone Core Pro installation, use this example. Serve the license JSON at a static URL accessible to your app. If you chose the Core Pro alias installation, replace @syidax/core-pro with @syidax/core in these imports.

import '@syidax/core-pro/css/core';
import { connectLicense } from '@syidax/core-pro/license';
import { defineCustomElement } from '@syidax/core-pro/components/sy-button.js';

await connectLicense('/syidax-license.json');
defineCustomElement();

Run your app’s development server and check the Button. Community does not require a Pro license.