ruitl 0.2.1

Template compiler for type-safe, server-rendered HTML components in Rust
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<!DOCTYPE html>
        <html>
        <head>
            <title>RUITL HTML Output Demos</title>
            <style>
                body {
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                    line-height: 1.6; margin: 0; padding: 40px; background: #f5f5f5;
                }
                .container {
                    max-width: 600px; margin: 0 auto; background: white;
                    padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                }
                .demo-link {
                    display: block; background: #007bff; color: white; padding: 15px 20px;
                    text-decoration: none; margin: 10px 0; border-radius: 6px;
                    transition: background 0.2s;
                }
                .demo-link:hover { background: #0056b3; }
                h1 { color: #343a40; }
                p { color: #6c757d; }
            </style>
        </head>
        <body>
            <div class="container">
                <h1>🎨 RUITL HTML Output Demos</h1>
                <p>Choose a demo to see how RUITL components render HTML for browsers:</p>

                <a href="basic_demo.html" class="demo-link">
                    📦 Basic Components Demo<br>
                    <small style="opacity: 0.8;">Simple buttons and page layout</small>
                </a>

                <a href="conditional_demo.html" class="demo-link">
                    🔀 Conditional Rendering Demo<br>
                    <small style="opacity: 0.8;">Boolean props and dynamic content</small>
                </a>

                <a href="composition_demo.html" class="demo-link">
                    🧩 Component Composition Demo<br>
                    <small style="opacity: 0.8;">Multiple components working together</small>
                </a>

                <hr style="margin: 30px 0; border: none; border-top: 1px solid #e9ecef;">

                <h2>🚀 How It Works</h2>
                <ol>
                    <li><strong>RUITL Components:</strong> Written in Rust with type-safe props</li>
                    <li><strong>HTML Generation:</strong> Components render to HTML strings</li>
                    <li><strong>Browser Ready:</strong> Standard HTML/CSS that works everywhere</li>
                    <li><strong>No JavaScript:</strong> Pure server-side rendering</li>
                </ol>

                <p style="background: #f8f9fa; padding: 15px; border-radius: 6px; margin-top: 20px;">
                    <strong>💡 Try it:</strong> View source on any of these pages to see the clean,
                    semantic HTML generated by RUITL components!
                </p>
            </div>
        </body>
        </html>