Interactive Counter
A simple counter component with increment, decrement, and reset buttons.
Code
const demoCounter = describe({
tag: "div",
styles: { display: "inline-block" },
children: [
describe({
tag: "div",
styles: { fontSize: "3rem", fontWeight: "bold", color: "#6c757d", marginBottom: "20px", textAlign: "center" },
attributes: { id: "counter-value" },
template: "0"
}),
describe({
tag: "div",
styles: { display: "flex", gap: "10px", justifyContent: "center" },
children: [
describe({
tag: "button",
template: "-",
styles: { padding: "10px 20px", fontSize: "20px", backgroundColor: "#dc3545", color: "white", border: "none", borderRadius: "8px", cursor: "pointer", fontWeight: "bold" },
action: () => { const el = document.getElementById("counter-value"); el.textContent = parseInt(el.textContent) - 1; }
}),
describe({
tag: "button",
template: "Reset",
styles: { padding: "10px 20px", fontSize: "16px", backgroundColor: "#6c757d", color: "white", border: "none", borderRadius: "8px", cursor: "pointer" },
action: () => { document.getElementById("counter-value").textContent = "0"; }
}),
describe({
tag: "button",
template: "+",
styles: { padding: "10px 20px", fontSize: "20px", backgroundColor: "#28a745", color: "white", border: "none", borderRadius: "8px", cursor: "pointer", fontWeight: "bold" },
action: () => { const el = document.getElementById("counter-value"); el.textContent = parseInt(el.textContent) + 1; }
})
]
})
]
});
build("demo-counter", demoCounter);
Themed Buttons
Buttons
with different styles and themes.Code
const demoButtons = describe({
tag: "div",
styles: { display: "flex", gap: "15px", justifyContent: "center", flexWrap: "wrap" },
children: [
describe({
tag: "button",
template: "Primary",
styles: { padding: "12px 24px", backgroundColor: "#007bff", color: "white", border: "none", borderRadius: "6px", cursor: "pointer", fontSize: "16px" },
action: () => alert("Primary button clicked!")
}),
describe({
tag: "button",
template: "Success",
styles: { padding: "12px 24px", backgroundColor: "#28a745", color: "white", border: "none", borderRadius: "6px", cursor: "pointer", fontSize: "16px" },
action: () => alert("Success button clicked!")
}),
describe({
tag: "button",
template: "Danger",
styles: { padding: "12px 24px", backgroundColor: "#dc3545", color: "white", border: "none", borderRadius: "6px", cursor: "pointer", fontSize: "16px" },
action: () => alert("Danger button clicked!")
})
]
});
build("demo-buttons", demoButtons);
Custom Card
A themed card component with custom styling.
Code
const demoCard = describe({
tag: "div",
theme: { cardBg: "#ffffff", primaryColor: "#6c757d", textColor: "#333" },
styles: { backgroundColor: "var(--cardBg)", border: "1px solid #e0e0e0", borderRadius: "12px", padding: "30px", maxWidth: "500px", margin: "0 auto", boxShadow: "0 4px 12px rgba(0,0,0,0.1)", textAlign: "left" },
children: [
describe({
tag: "h3",
template: "Beautiful Component Card",
styles: { color: "var(--primaryColor)", marginBottom: "15px", fontSize: "1.8rem" }
}),
describe({
tag: "p",
template: "This card component is built entirely with Tan Compose. It features custom theming, nested children, and beautiful styling - all defined declaratively.",
styles: { color: "var(--textColor)", lineHeight: "1.8", marginBottom: "20px" }
}),
describe({
tag: "button",
template: "Learn More",
styles: { padding: "12px 24px", backgroundColor: "var(--primaryColor)", color: "white", border: "none", borderRadius: "6px", cursor: "pointer", fontSize: "16px" },
action: () => window.location.href = "https://github.com/yourusername/tan-compose"
})
]
});
build("demo-card", demoCard);