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 Svelte Widgets for the Svelte Framework. We don't want to keep you in suspense and will proceed immediately.

Step 1. Install library dependencies​

The SVAR library of controls is an open-source library distributed under the MIT license. You can install the package via a package manager. For example, you can use npm and run the following commands:

npm config set @wx:registry https://npm.svar.dev

and then:

npm install @wx/svelte-core

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 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