Skip to content

Ranvier in Nacara

The Nacara.Plugin.Ranvier project powers the live examples in these docs. It scans Markdown, compiles Ranvier.View components, renders their initial HTML and bundles hydration code.

Choose a fence

  • fsharp ranvier renders a Component<unit>. Use it for a working UI example.
  • fsharp map turns a scenario and its controls into a signal map.
  • fsharp live, supplied by Nacara's LiveExample plugin, opens an editor that compiles and evaluates code in the browser. Try the editable counter.

For a component already exposed by your example project:

```fsharp ranvier
MyExamples.counter
```

Use setup for declarations shared by later component fences, render=name for a component declared in the current fence, and show=output to display only its result. The plugin README covers registration and the complete fence options.

What runs where

The site build renders static HTML first. In the browser, hydration adopts that HTML and connects event handlers and bindings. The live editor instead compiles the edited code when you press Run and mounts it into a fresh output frame.

Standard Ranvier.View components need no Fable compiler plugin. The live editor excludes packages that require one, including Ranvier.View.Arms and its Arms.With / Arms.Match forms. Build those examples in a local project with their compiler plugin enabled.

Edit this page