Skip to main content

Styling

You can customize the appearance of the editor components by applying specific styles.

Defining a CSS Class for the Editor's Box​

<script>
   import { Editor } from "@svar-ui/svelte-editor";
</script>

<Editor css="myBox" />

This feature allows assigning a CSS class to the editor's main container element. The css attribute can be used to apply custom styles to the editor box, enabling developers to modify its visual design to align with the application's theme or layout.

In this example, the myBox CSS class should be predefined in the stylesheet. This is helpful when the editor needs to match the surrounding UI elements or have distinct visual characteristics, such as specific padding, borders, or background colors.

Disabling fonts​

Whenever you need to disable the fonts used in a theme, you can make use of the fonts property of the theme and set it to the false value:

<script>
  import { Willow } from "@svar-ui/svelte-core";
  import { Editor } from "@svar-ui/svelte-editor";
</script>

<div style="width:300px">
  <Willow fonts={false}>    
    <Editor />
  </Willow>
</div>
Pay attention

Please note that if you switch the default fonts off, you will have to include the fonts you need by yourself.

Related articles: Visaul themes