Tesserae

Tesserae

Tesserae is a UI toolkit for building web applications entirely in C#, inspired by Microsoft's Fluent UI toolkit. It leverages the Transpose C# to JavaScript compiler to provide a strongly typed, easy-to-use UI development experience.

📖 Official Documentation: docs.curiosity.ai/tesserae  ·  🎨 Live Samples: curiosity.ai/tesserae

The documentation site is the recommended starting point for new users and includes guides, API references, and interactive examples for every component.

Getting Started

To create a new, blank Tesserae project from scratch, follow these steps:

1. Update or install the Transpose compiler:

   dotnet tool update --global Transpose.Compiler
   

2. Install the Transpose project templates:

   dotnet new install Transpose.Template
   

3. Create a new Transpose project:

   dotnet new transpose
   

4. Add the Tesserae package:

   dotnet add package Tesserae
   

Build Process

Tesserae projects are compiled from C# to JavaScript using the Transpose compiler.

tps.json Configuration

The build process is controlled by the tps.json file located in your project root. This file defines:

• Output Directory: Where the compiled files will be placed (e.g., "output": "$(OutDir)/tps/").
• Entry Point: The name of the generated JavaScript file (e.g., "fileName": "app.js").
• HTML Generation: Whether to generate an index.html file and its title.
• Resources: Additional CSS, images, or JavaScript files to be included in the build output.

Compilation Output

When you build the project (e.g., via dotnet build or in Visual Studio), the Transpose compiler translates your C# code into JavaScript and copies necessary assets to the output folder. By default, these files are located in: bin/Debug/netstandard2.0/tps/ (or bin/Release/... depending on your configuration).

Local Testing

To test your application locally, we recommend using the dotnet-serve tool, which is a simple command-line HTTP server.

1. Install dotnet-serve:

   dotnet tool install dotnet-serve --global
   

2. Serve the compiled files: Navigate to the Transpose output directory and start the server:

   cd bin/Debug/netstandard2.0/tps/
   dotnet serve --port 5000
   

3. View your app: Open your browser and navigate to http://localhost:5000/.

Documentation

For comprehensive guides, API references, and interactive component examples, visit the official documentation:

📖 docs.curiosity.ai/tesserae

Quick links to docs within this repo:

• Styling
• Custom Styles
• Colors
• Iconography
• Layout & Alignment
• Routing

Samples

The Tesserae.Tests project contains numerous examples demonstrating how to use the library components. A live version of these samples is hosted at https://curiosity.ai/tesserae.