📚 HSX Examples
Practical examples showing how to build real applications with HSX.
{`// blog.hsx - Simple blog page HSX: * title = "My Blog" * HSX: * posts = ["Post 1", "Post 2", "Post 3"] * HSX: +T_H_E_M_E+ ""dark"" HSX: +D_I_V+ HSX: +H_1+ ""My Blog"" HSX: @WHL@ * posts = 3.0 * HSX: +C_A_R_D+ ""Post: "" + posts[0] HSX: +T_X_T+ ""Read more about this post..."" HSX: +B_A_I_T+ ""Read More"" HSX: +S_P_C_R+ = 1 HSX: @WHL@ * posts = 3.0 * HSX: +/D_I_V+`} Renders a blog page with 3 posts in cards. Each card has a title, description, and button.
{`// login.hsx - Login page with backend HSX: +T_H_E_M_E+ ""dark"" HSX: +D_I_V+ HSX: +H_2+ ""Login"" // Login form HSX: +F_R_M+ ""/login"" HSX: +L_B_L+ ""Username"" HSX: +I_N_U_T+ ""Enter username"" HSX: +L_B_L+ ""Password"" HSX: +I_N_U_T+ ""Enter password"" HSX: +S_U_B_M+ ""Login"" HSX: +/F_R_M+ // Backend login handler HSX: "/login" { "SELECT * FROM users WHERE username = 'admin'" " " = 200 } HSX: +/D_I_V+`} A login form with backend POST handler that validates credentials and returns JSON.
{`// dashboard.hsx - Dashboard with stats HSX: * loggedIn = 1.0 * HSX: * stats = ["Users: 100", "Posts: 50", "Comments: 200"] * HSX: +T_H_E_M_E+ ""dark"" HSX: +D_I_V+ HSX: C> * loggedIn = 1.0 * >C = F> // Show dashboard HSX: +H_1+ ""Dashboard"" HSX: +G_R_D+ = 3 HSX: @WHL@ * stats = 3.0 * HSX: +C_A_R_D+ ""Stat"" HSX: +T_X_T+ ""Stats Data"" HSX: @WHL@ * stats = 3.0 * HSX: +/G_R_D+ // Chart placeholder HSX: +D_I_V+ HSX: +H_3+ ""Analytics"" HSX: +T_X_T+ ""Chart coming soon..."" HSX: +/D_I_V+ >F error E> // Not logged in HSX: +H_1+ ""Please log in"" HSX: +B_A_I_T+ ""Go to Login"" >E =Print HSX: +/D_I_V+`} A dashboard that checks login status and shows stats in a grid. Includes conditional rendering.
{`// cart.hsx - Shopping cart HSX: * items = ["Item 1", "Item 2", "Item 3"] * HSX: * prices = [10.0, 20.0, 30.0] * HSX: * total = (10.0 + 20.0 + 30.0) * HSX: +T_H_E_M_E+ ""dark"" HSX: +D_I_V+ HSX: +H_1+ ""Shopping Cart"" // List items HSX: +D_I_V+ HSX: @WHL@ * items = 3.0 * HSX: +T_X_T+ ""Item: "" + items[0] + "" - $"" + prices[0] HSX: +B_A_I_T+ ""Remove"" HSX: @WHL@ * items = 3.0 * HSX: +/D_I_V+ // Total HSX: +H_R_L+ HSX: +T_X_T+ ""Total: $"" + total HSX: +B_A_I_T+ ""Checkout"" HSX: +/D_I_V+`} A shopping cart showing items, prices, and a total. Includes remove and checkout buttons.
{`// api-app.hsx - Full stack application HSX: * name = "API Demo" * // Frontend UI HSX: +T_H_E_M_E+ ""dark"" HSX: +D_I_V+ HSX: +H_1+ ""API Demo"" HSX: +T_X_T+ ""Click to fetch users"" HSX: +B_A_I_T+ ""Fetch Users"" HSX: +/D_I_V+ // Backend API - Get users HSX: "/api/users" { "SELECT * FROM users" "[ , ]" = 200 } // Backend API - Create user HSX: "/api/users" { "INSERT INTO users (name) VALUES ('Charlie')" " " = 201 } // Backend API - Delete user HSX: "/api/users/1" { "DELETE FROM users WHERE id = 1" " " = 200 }`} A complete REST API with GET, POST, DELETE endpoints and a frontend UI to interact with them.