నిజమైన యాప్లలో Lily చూడండి
ఏడు పూర్తి ఉదాహరణ ప్రాజెక్టులు హెడ్లెస్ భాగాలను తీసుకుని, శైలి జోడించి, నిజమైన వెబ్సైట్ను ఎలా షిప్ చేయాలో చూపుతాయి. మీరు ఉపయోగించే ఫ్రేమ్వర్క్ ఎంచుకోండి.
పూర్తి CSS మరియు రూటింగ్తో డెమో యాప్లు
HTML JavaScript
సాదా HTML పేజీలు, వనిల్లా JavaScript, బిల్డ్ సాధనాలు లేవు. ఏ స్టాటిక్ హోస్ట్లోనైనా ఇమిడిపోతుంది — చిన్న సైట్లు మరియు క్రమానుగత మెరుగుదలకు సరైనది.
Svelte + SvelteKit
Svelte 5 రూన్లను ఉపయోగించే SvelteKit 3 యాప్. భాగ మార్గాలు, ఫైల్-ఆధారిత రూటింగ్, మరియు ప్రతి భాగం యొక్క శైలి ఇచ్చిన స్టోరీబుక్.
React + Next.js
ప్రతి భాగాన్ని సందర్భంలో చూపే Next.js 16 యాప్, అంతటా TypeScript మరియు సంయుక్త నమూనాల కోసం డెమో పేజీలతో.
Vue + Nuxt.js
Nuxt 4 యాప్. <script setup> మరియు Composition API ప్రతి డెమో మార్గంలో.
Angular + Analog
Angular 22 + Analog.js యాప్. ఫైల్-ఆధారిత రూటింగ్, సిగ్నల్స్, జోన్-రహిత మార్పు గుర్తింపు, మరియు పూర్తి SSG ప్రీరెండరింగ్.
Blazor Web
Razor భాగాలతో Blazor Web యాప్. సర్వర్- మరియు WebAssembly-స్నేహపూర్వకం, .NET 10 బేస్లైన్తో.
Nunjucks + Eleventy
Nunjucks మాక్రోలను ఉపయోగించే Eleventy సైట్. ఇంకా నిజమైన భాగ వ్యవస్థ కావాలనుకునే కంటెంట్-భారీ స్టాటిక్ సైట్లకు అనువైనది.
ప్రతి ఉదాహరణ యాప్కు ఒకే ఆకారం ఉంటుంది
ఫ్రేమ్వర్కుల మధ్య దూకడం సుపరిచితంగా అనిపించేందుకు, ప్రతి ఉదాహరణ యాప్ అందిస్తుంది:
- ఇక్కడ స్వాగత మార్గం
/ఇది ప్రాజెక్టును పరిచయం చేస్తుంది. - ఇక్కడ భాగ సూచిక
/componentsఇది ప్రతి భాగాన్ని జాబితా చేస్తుంది. - ఇక్కడ ప్రతి భాగానికి ఒక డెమో పేజీ
/components/<component>. - నిజమైన CSS — నైరూప్య డిజైన్ టోకెన్లు కాదు — కాబట్టి మీరు శైలులను నేరుగా అప్పు తీసుకోవచ్చు.
- పెట్టె నుంచే పనిచేసే కీబోర్డ్ నావిగేషన్ మరియు ఫోకస్ నిర్వహణ.
ఒక్క భాగానికి శైలి ఎలా ఇచ్చారో చూడాలా?
సంబంధిత ఉదాహరణ యాప్ తెరవండి, ఇక్కడికి వెళ్ళండి
/components/<name>మరియు మార్కప్, CSS ని మీ స్వంత ప్రాజెక్టులోకి కాపీ చేయండి. ఉదాహరణ యాప్లు ఉద్దేశపూర్వకంగా సాదా (లేదా దాదాపు సాదా) CSS ఉపయోగిస్తాయి, తద్వారా మీరు వాటిని మీరు ఇష్టపడే ఏ వ్యవస్థకైనా మలచుకోవచ్చు.
బదులుగా హెడ్లెస్ కావాలా?
ఏదైనా ఉదాహరణ యాప్ను దాని సంబంధిత హెడ్లెస్ ప్యాకేజీతో జత చేయండి — అవి అవే భాగాలను ఏ CSS లేకుండా ప్రచురిస్తాయి, మీ స్వంత డిజైన్ టోకెన్లకు సిద్ధంగా.