Skip to main content

How to Start

If you are looking through this page, it means only one thing - you are ready to start building a new app based on the SVAR Core components for the Svelte Framework. We don't want to keep you in suspense and will proceed immediately.

Step 1. Install library dependencies​

SVAR Core library of controls is an open-source library distributed under the MIT license.It includes three separate packages: for Form controls, Menu and Toolbar. You can install the necessary package via a package manager. For example, you can use npm and run the following commands:

  • for Form controls (the core library):
npm install wx-svelte-core
  • for the Menu widget:
npm install wx-svelte-menu
  • for the Toolbar widget:
npm install wx-svelte-toolbar

Working with Svelte 4.x​

If you want to use the library with an older version of the Svelte toolkit, you can do so by using the 1.x version of the widgets.

npm install wx-svelte-core@1.3.0
npm install wx-svelte-menu@1.3.0
npm install wx-svelte-toolbar@1.3.0

Step 2. Import components​

To use the installed package in your application, you need to import the corresponding components. Here's an example of importing the Button control from the wx-svelte-core package:

<script>
    import { Button} from "wx-svelte-core";
</script>

Step 3. Initialize components​

Use the corresponding tag to create the chosen control on a page:

<script>    
    import { Button} from "wx-svelte-core";
</script>

<Button>Click Me</Button>

Follow the related Controls sections for more information on initialization and configuration.

Step 4. Apply a skin​

To ensure correct initialization and a visually pleasing appearance of the control, it's recommended to apply a skin at the top level of your application. The SVAR Svelte library provides three skins: Willow, DarkWillow, and Material. Each skin is available in the package you have already installed.

To apply a skin to all the components in your application, you can import the desired skin from the same package and wrap your entire application within the skin's tag. Here's an example:

<script>
    import { Button, Material } from "wx-svelte-core";
</script>

<Material>  
    <!-- Place your entire application code here -->  
    <Button>Click Me</Button>
</Material>

In the above code, we've imported the Material skin from wx-svelte-core and wrapped our entire application code within the <Material> tag. This ensures that all the components inside the <Material> tag will have the Material skin applied.

By applying the skin at the top level, you don't need to wrap each individual component within the skin's tag. It simplifies your code structure and makes it more maintainable.

Learn more about skins in the Styling guide.

Step 5. Choose it yourself​

The last step depends on what you want to do next. Here are the options:

  • Dive into the specificity of each control at the Widgets section
  • Explore the API Reference to get the full picture of the library functionality
  • Check the possibilities of localization, styling and user-app interaction in the Guides
  • Surf the Samples to check all the available features