Skip to content
3.0 Partas.Solid now targets Solid 2

Solid components,
written in F#

A typed F# DSL and a Fable compiler plugin that turns your components into the JSX Solid expects, with no runtime of its own.

Get started See the JSX output GitHub
dotnet add package Partas.Solid --version 3.0.0

3.0 is a prerelease and is not on NuGet yet. Install it from a local feed.

Try it

Every example on this site is compiled from its F# when the site is built. Fable and the Partas plugin produce JSX, Solid's compiler turns it into DOM code, and it runs in your browser. This one also uses anime.js from npm.

[<SolidComponent>]
let HeroCounter () =
    let count, setCount = createSignal 0
    let mutable number: HTMLSpanElement = JS.undefined
    let mutable bars: HTMLDivElement = JS.undefined

    let pop = {| scale = {| from = 1.4; ``to`` = 1 |}; ease = "outElastic(1, .5)" |}
    let wave =
        {| scaleY = {| from = 1; ``to`` = 2.6 |}; duration = 240
           alternate = true; loop = 1
           delay = stagger (30, {| from = "center" |}) |}

    let bump () =
        setCount (count () + 1)
        animate (number, pop) |> ignore
        animate (bars.children, wave) |> ignore

    div (class' = "p-demo__stage") {
        span(class' = "p-demo__count").ref (number) { $"{count ()}" }
        div(class' = "p-demo__bars").ref (bars) {
            Repeat(count = 13) { yield fun _ -> span () }
        }
        button (class' = "p-btn p-btn--accent", onClick = fun _ -> bump ()) {
            "Increment"
        }
    }

export function HeroCounter() {
    const patternInput = createSignal(0);
    const count = patternInput[0];
    let number = void 0;
    let bars = void 0;
    const pop = {
        ease: "outElastic(1, .5)",
        scale: {
            from: 1.4,
            to: 1,
        },
    };
    let wave;
    const scaleY = {
        from: 1,
        to: 2.6,
    };
    wave = {
        alternate: true,
        delay: stagger(30, {
            from: "center",
        }),
        duration: 240,
        loop: 1,
        scaleY: scaleY,
    };
    return <div class="p-demo__stage">
        <span class="p-demo__count"
            ref={number}>
            {`${count()}`}
        </span>
        <div class="p-demo__bars"
            ref={bars}>
            <Repeat count={13}>
                {(_arg) => <span />}
            </Repeat>
        </div>
        <button class="p-btn p-btn--accent"
            onClick={(_arg_1) => {
                patternInput[1](count() + 1);
                animate(number, pop);
                return animate(bars.children, wave);
            }}>
            Increment
        </button>
    </div>;
}

Why Partas.Solid

Write the whole front end in F#, and ship ordinary Solid code.

Typed DSL

Tags, attributes, ARIA and SVG are typed F#. A misspelled attribute is a compile error.

 Compiles to JSX

The plugin rewrites the F# AST into JSX, and Solid's compiler does the rest.

 Solid 2 APIs

Signals, memos, split effects, stores, Loading, Errored and actions are all bound.

 Components as types

With [<SolidTypeComponent>], props get defaults, and the plugin writes the merge and omit for you.

 Any npm library

Bind a package with [<Import>] and drive it through a ref, as the demo above does.

 Oxpecker heritage

An opinionated fork of Oxpecker.Solid. Components you write use the same DSL as native tags.

The Partas family

Open source F# front-end projects, built on Fable and Solid.

Partas.Solid

The DSL and the compiler plugin. Version 3.0 targets Solid 2.

 Ecosystem

Bindings for Solid libraries, and a port of shadcn/ui.

Not on Solid 2 yet Partas.AnimeJs

F# bindings for anime.js, the library animating the demo above.

Write your first component

Set up Fable, the packages and Vite, then learn the two ways to write a component.

Installation Overview