CC.CSX.Htmx extends CC.CSX with tags methods for Htmx
Get Started
$ dotnet add package CC.CSX.HtmxReadme
CC.CSX
About
CC.CSX provides the ability to define and generate HTML output in
a declarative fashion by just using pure C# or F# or other .Net based language.
The idea is to define strongly typed readable and ergonomic structures of HTML components, elements and attributes in a way that is similar to the way you would write HTML, but in a more structured and type-safe way.
This way the developer is able to easily organize, navigate and manipulate the final output.
It is similar like JSX
in the JS world, or even more similar to hiccup in clojure.
How to use it
Main usage would be as Html Renderer, you can build entire pages, components and applications with it wihout the need to write any HTML(or JS).
For this you also need to install the CC.CSX.Web package from Nuget in order to have the Render method available.
You may also need the CC.CSX.Htmx package which provides the Htmx related attributes.
This way you can build reactive applications with ease and without the need to write any JS or HTML.
Bellow you can find a complete version of the legendary Counter example, but this time in C#, Asp.Net using , Dotnet Minimal APIs and this library CC.CSX.
var builder = WebApplication.CreateBuilder(args); //classic bootstrapping
var app = builder.Build(); // create the app
int counter = 0;
app.MapGet("/", () => Render( // Render the Html node
Master("Counter", // Master layout is just a method defined bellow in the code
//we use hxPost to send a post request and update the counter with the new value
Button("-", hxPost("/decrement", target: "#counter")),
Label(id("counter"), counter),
Button("+", hxPost("/increment", target: "#counter"))
)
));
// These are the post routes that will be called when the buttons
// are clicked and will just return the new counter value
app.MapPost("/increment", () => Render($"{++counter}"));
app.MapPost("/decrement", () => Render($"{--counter}"));
app.Run();
// This method provides the master layout for the page and can be reused
static HtmlNode Master(string title, params HtmlNode[] content)
=> Html(
Meta(charset("utf-8")),
Head(
Title("Htnet Demo"),
Meta(charset("utf-8")),
HtmxImports),
Body(
H1(@class("text-center"), title),
content, // this is the content that will be rendered as a child of the body
Hr()
)
);