This is a Svelte wrapper around the rough-notation library.

It exposes both a wrapper component using a slot, and an action that can be used on a DOM element with Svelte's use: syntax.

Wrapper Component

The component can be toggled by setting the visible boolean property, or through the same show and hide API exposed by the original component. It also has properties for each configuration option exposed by rough-notation, and these can be updated after the component is created.

``html

Some text
`

Annotation groups work as well. The rough-notation group implementation uses an undocumented attribute of the annotation, but this Svelte wrapper supports it, so you can just pass the component instance directly to the annotation group.

`html



ag.show()}>Show Group
Here we have
some important things
and also
some more things
`

Svelte Action

The action's configuration can contain all the options exposed by rough-notation, as well as a visible property that controls the show/hide behavior of the annotation. Updates to the configuration will be applied to the annotation.

Annotation groups are not supported with the action version of the Svelte wrapper.

`html

Some text
`

Example

There is a small sample app in the site` directory of this repository, or you can check it out in the Svelte REPL!