Installation

You can either manually install and setup or use the dotnet templates.

Partas.SolidStart

tip

If you quickly just want to get started and give the framework a try, then we recommend using the Partas.SolidStart Templates.

Templates using solid-start can be used to quickly spin up a preconfigured environment¹.

warning

The SolidStart templates use the Solid-JS meta framework of the same name.

It is a preconfigured full-stack framework.

We are able to plugin a dotnet backend to make the best of both worlds, but that is outside the scope of these docs.

Template Quick Start

dotnet new install Partas.Solid.Start.Templates

This will provide you quick access to several templates:

dotnet new bare-devtools

dotnet new tailwind-devtools

dotnet new solidbase-devtools

dotnet new mdx-devtools

Template Name	Included libraries	Description
`bare-devtools`	solid-devtools	Barebones template with devtools pre-setup
`tailwind-devtools`	tailwind v4; solid-devtools	Barebones template with tailwindcss v4 and devtools
`solidbase-devtools`	solidbase; solid-devtools	SolidBase static website framework with devtools
`mdx-devtools`	solid-mdx; solid-devtools	MDX based site template with devtools

Build Scripts

Due to the nature of the SolidStart meta framework, using Fable with a run command would cause vinxi to start up a production server which wouldn't work.

To remediate this, we use the SAFE-Stack build project based on FAKE to run Fable and vinxi in parallel.

Available Commands:

dotnet run setup

dotnet run dev

dotnet run restore

Setup

After creating your template, navigate to the root of the solution and run:

dotnet run setup

This will:

Install Fable²
Install all NPM & Dotnet dependencies
Start the Development Server

warning

The NPM dependency installation can take up to 5 minutes (varies) on the first run.

Be patient!

Dev Server

To startup the dev server, just run:

dotnet run dev

Custom Scripts

See Program.fs in the Build.fsproj to see how the scripts work.

info

Since the templates rely on .js and .jsx config files, the build system compiles to .fs.jsx by default.

When running dev mode, all .fs.jsx files are cleaned out.

Manual

Fable 5

Ensure you have Fable 5.0+ installed³.

// Create your dotnet tool manifest in a new solution
dotnet new tool-manifest

// Install fable to solution
dotnet tool install Fable

Partas.Solid

dotnet add package Partas.Solid

paket install Partas.Solid

NPM

This gives you everything you need to start (ie you can compile with fable and see the output JSX).

But to actually run the output, you'll need to setup your JavaScript runtime using Vite or whatever bundler/process you choose. You'll then need to fulfill the JS dependencies such as solid-js to start.

npm install solid-js

Bindings

Femto

When installing or using the bindings I've crafted, you can use femto to also manage the NPM dependencies. However, for some libraries this might not be possible (as they may have components packaged in versioned libraries themselves).

Compiling/Usage

Compile with the following flags passed to fable:

-e .fs.jsx -c Release [--typedArrays false]

JSX

This plugin compiles to JSX. You will need to therefore tell Fable to compile your JS files with the .jsx extension.

Release vs Debug AST

F# & Fable give different AST trees between Release and Debug mode. The plugin was developed with Release mode in mind. This is a non-issue until you try to compile with fable watch.

When compiling with fable watch or in debug mode, use the release flag

Typed arrays

Fable uses the most optimised/performant primitives when compiling to js (ie not ts). This means integer arrays are compiled into the Int32Array primitives in js.

This becomes an issue when you're passing arrays of integers to libraries like ApexCharts.

There are two solutions to the problem, you can either disable typed arrays using a fable flag, or you can cast the integers into a different type box 5.

-e .fs.jsx

-c Release

--typedArrays false

These docs are made using the solidbase-devtools Partas.SolidStart template! ↩
This will install fable using the --prerelease flag, since this plugin relies on Fable 5.0 ↩
At the time of writing, Fable 5 is still in alpha (although it is absolutely usable, it is understandable if this is a dealbreaker until a stable release), to install it, you might need to pass the --prerelease flag. ↩

Last updated: 7/11/25, 1:35 AM