René's URL Explorer Experiment

Title: JSX elements - Nullstack

Open Graph Title: JSX elements - Nullstack

Description: Nullstack JSX deviates a little from the spec.

Open Graph Description: Nullstack JSX deviates a little from the spec.

Opengraph URL: https://nullstack.app/jsx-elements

Generator: Created with Nullstack - https://nullstack.app

og:image	https://nullstack.app/image-1200x630.png
og:type	website
og:site_name	Nullstack
og:locale	en-US
mobile-web-app-capable	yes
apple-mobile-web-app-capable	yes
application-name	Nullstack
apple-mobile-web-app-title	Nullstack
msapplication-starturl	/
msapplication-TileColor	#2d3748
nullstack	{"page":{"image":"/image-1200x630.png","status":200,"locale":"en-US","title":"JSX elements - Nullstack","description":"Nullstack JSX deviates a little from the spec."},"environment":{"client":false,"server":true,"development":false,"production":true,"mode":"ssg","key":"23ad2dd940244ab04e281282c05613bd73043c4f","name":""},"settings":{},"worker":{"enabled":true,"fetching":false,"preload":["/application-startup","/context-data","/context-environment","/context-instances","/context-page","/context-project","/context-secrets","/context-settings","/context","/frequently-asked-questions","/full-stack-lifecycle","/getting-started","/how-to-customize-webpack","/how-to-deploy-a-nullstack-application","/jsx-elements","/nullstack-logo","/persistent-components","/proxy","/refs","/routes-and-params","/script-runner","/server-functions","/server-request-and-response","/server-side-rendering","/service-worker","/single-page-applications","/stateful-components","/stateless-components","/static-site-generation","/styles","/transpilation-and-security","/two-way-bindings","/typescript","/what-is-nullstack","/illustrations/nulla-dps.webp","/illustrations/nulla-fullbody.png","/illustrations/nulla-glue.webp","/illustrations/nulla-healer.webp","/illustrations/nulla-hero.webp","/illustrations/nulla-map.webp","/illustrations/nulla-scrolls.webp","/illustrations/nulla-tanker.webp","/illustrations/nulla-tools.webp","/arrow.webp","/stars.webp","/footer.webp","/contributors","/roboto-v20-latin-300.woff2","/roboto-v20-latin-500.woff2","/crete-round-v9-latin-regular.woff2"],"staleWhileRevalidate":[],"cacheFirst":[],"headers":{},"api":"","cdn":"","protocol":"https","queues":{},"online":true,"responsive":true},"params":{"slug":"jsx-elements"},"project":{"domain":"nullstack.app","name":"Nullstack","color":"#d22365","viewport":"width=device-width, initial-scale=1, shrink-to-fit=no","type":"website","display":"standalone","orientation":"portrait","scope":"/","root":"/","sitemap":true,"favicon":"/favicon-96x96.png","disallow":[],"icons":{"72":"/icon-72x72.png","96":"/icon-96x96.png","128":"/icon-128x128.png","144":"/icon-144x144.png","152":"/icon-152x152.png","180":"/icon-180x180.png","192":"/icon-192x192.png","384":"/icon-384x384.png","512":"/icon-512x512.png"},"backgroundColor":"#2d3748"},"instances":{"application":{"persistent":false},"Header/0-0-0-0":{"expanded":false,"persistent":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Documentation","href":"/getting-started"},{"title":"Examples","href":"/examples"},{"title":"Contributors","href":"/contributors"},{"title":"F.A.Q","href":"/frequently-asked-questions"},{"title":"Waifu","href":"/waifu"}],"menu":{"title":"Toggle Menu"},"action":{"title":"Get Started","href":"/getting-started"},"search":{"title":"Search [ctrl + k]"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"Article/0-0-0-18/jsx-elements":{"title":"JSX elements","html":" Using HTML attributes<\\/a><\\/h2> Nullstack JSX deviates a little from the spec.<\\/p>\n You can use the normal HTML attributes like `class<\\/code> and for<\\/code> directly.<\\/p>\n` `<<\\/span>label<\\/span> for<\\/span>=<\\/span>\"<\\/span>input\"<\\/span><\\/span> class<\\/span>=<\\/span>\"<\\/span>dont-label-me\"<\\/span><\\/span>><\\/span><\\/span> I<\\/span> am a label </<\\/span>label<\\/span>><\\/span><\\/span>\n<\\/code><\\/pre>\n` Headless components<\\/a><\\/h2> If you want to skip rendering the component at all you can simply return `false<\\/code> from the render.<\\/p>\n` import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Headless<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n \n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> false<\\/span>;<\\/span>\n }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Headless;<\\/span>\n<\\/code><\\/pre>\nThis will allocate DOM space for when you decide to render markup there.<\\/p>\n This is also useful for conditional rendering.<\\/p>\n If all you want to do is to generate an invisible component you can skip defining the render method at all.<\\/p>\n Boolean attributes<\\/a><\\/h2> Attributes can be assigned as a boolean.<\\/p>\n When the value is `false<\\/code> the attribute will not be rendered at all.<\\/p>\n` `When the value is true<\\/code> it will be rendered as a boolean attribute without a string value.<\\/p>\n` `<<\\/span>button<\\/span> disabled<\\/span>=<\\/span>{<\\/span>false<\\/span>}<\\/span><\\/span>><\\/span><\\/span> Button </<\\/span>button<\\/span>><\\/span><\\/span>\n<\\/code><\\/pre>\nYou can shortcut attributes when you know the value will always be true.<\\/p>\n` `<<\\/span>button<\\/span> disabled<\\/span>><\\/span><\\/span> Button </<\\/span>button<\\/span>><\\/span><\\/span>\n<\\/code><\\/pre>\n` \n ✨ Learn more about attributes<\\/a>.<\\/p>\n<\\/blockquote>\n Element tag<\\/a><\\/h2> If you need to decide the tag name at runtime, you can use the element tag and set the tag attribute conditionally.<\\/p>\n `<<\\/span>element<\\/span> tag<\\/span>=<\\/span>{<\\/span>!<\\/span>!<\\/span>link ?<\\/span> 'a'<\\/span> :<\\/span> 'span'<\\/span>}<\\/span><\\/span> href<\\/span>=<\\/span>{<\\/span>link \|\|<\\/span> false<\\/span>}<\\/span><\\/span>><\\/span><\\/span>\n some arbitrary text\n</<\\/span>element<\\/span>><\\/span><\\/span>\n<\\/code><\\/pre>\nWhen the tag attribute is omitted, Nullstack will default to a div<\\/code>.<\\/p>\n` Fragments<\\/a><\\/h2>Fragments are elements that renders it's contents in the parent component.<\\/p>\nexport<\\/span> default<\\/span> function<\\/span> Fragmented<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span><\\/span>><\\/span><\\/span>\n <<\\/span><\\/span>><\\/span><\\/span>\n <<\\/span>button<\\/span>><\\/span><\\/span> I<\\/span>'m a button!<\\/span> </<\\/span>button<\\/span>><\\/span><\\/span>\n </<\\/span><\\/span>><\\/span><\\/span>\n <<\\/span>p<\\/span>><\\/span><\\/span> Paragraph!<\\/span> </<\\/span>p<\\/span>><\\/span><\\/span>\n </<\\/span><\\/span>><\\/span><\\/span>\n )<\\/span>\n}<\\/span>\n<\\/code><\\/pre>\nWherever it is used, the above functional component will be rendered as follows:<\\/p>\n<<\\/span>button<\\/span>><\\/span><\\/span> I<\\/span>'m a button!<\\/span> </<\\/span>button<\\/span>><\\/span><\\/span>\n<<\\/span>p<\\/span>><\\/span><\\/span> Paragraph!<\\/span> </<\\/span>p<\\/span>><\\/span><\\/span>\n<\\/code><\\/pre>\nSVG Elements<\\/a><\\/h2>SVG can be used as if it were any regular HTML tag.<\\/p>\n You can manipulate the SVG using attributes and events normally.<\\/p>\n<<\\/span>svg<\\/span> height<\\/span>=<\\/span>{<\\/span>this<\\/span>.<\\/span>size}<\\/span><\\/span> viewBox<\\/span>=<\\/span>\"<\\/span>0 0 100 100\"<\\/span><\\/span>><\\/span><\\/span>\n <<\\/span>circle<\\/span> cx<\\/span>=<\\/span>\"<\\/span>50\"<\\/span><\\/span> cy<\\/span>=<\\/span>\"<\\/span>50\"<\\/span><\\/span> r<\\/span>=<\\/span>\"<\\/span>40\"<\\/span><\\/span> onclick<\\/span>=<\\/span>{<\\/span>this<\\/span>.<\\/span>grow}<\\/span><\\/span> /><\\/span><\\/span>\n</<\\/span>svg<\\/span>><\\/span><\\/span> \n<\\/code><\\/pre>\n\n✨ Learn more about events<\\/a>.<\\/p>\n<\\/blockquote>\n Components with children<\\/a><\\/h2>Your component can be invoked passing a block of content.<\\/p>\n<<\\/span>Header<\\/span><\\/span>><\\/span><\\/span> \n <<\\/span>h1<\\/span>><\\/span><\\/span> Hello World </<\\/span>h1<\\/span>><\\/span><\\/span>\n</<\\/span>Header<\\/span><\\/span>><\\/span><\\/span>\n<\\/code><\\/pre>\nThis doesn't automatically render the block since it wouldn't know where to place it.<\\/p>\n You can destructure the children on the render method and place it in your markup.<\\/p>\nimport<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Header<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n \n render<\\/span>(<\\/span>{<\\/span>children}<\\/span><\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>div<\\/span>><\\/span><\\/span>{<\\/span>children}<\\/span></<\\/span>div<\\/span>><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Header;<\\/span>\n<\\/code><\\/pre>\n\n✨ This is possible because the children<\\/code> key is part of the instance context<\\/a>.<\\/p>\n<\\/blockquote>\n Lists<\\/a><\\/h2>You can map over lists without declaring a key<\\/code>.<\\/p>\n\n✨ A key in Nullstack is an ID for a specific component instance. Learn more about the instance key<\\/a>.<\\/p>\n<\\/blockquote>\n Lists that may change length must be wrapped in a parent element just for them.<\\/p>\n <<\\/span>ul<\\/span>><\\/span><\\/span>\n {<\\/span>list.<\\/span>map<\\/span>(<\\/span>(<\\/span>item<\\/span>)<\\/span> =><\\/span> <<\\/span>li<\\/span>><\\/span><\\/span>{<\\/span>item.<\\/span>name}<\\/span></<\\/span>li<\\/span>><\\/span><\\/span>)<\\/span>}<\\/span>\n</<\\/span>ul<\\/span>><\\/span><\\/span>\n<\\/code><\\/pre>\nYou can emulate a fixed-size list by returning false<\\/code> instead of an element to reserve dom space.<\\/p>\n{<\\/span>list.<\\/span>map<\\/span>(<\\/span>(<\\/span>item<\\/span>)<\\/span> =><\\/span> (<\\/span>\n item.<\\/span>visible ?<\\/span> <<\\/span>div<\\/span>><\\/span><\\/span>{<\\/span>item.<\\/span>name}<\\/span></<\\/span>div<\\/span>><\\/span><\\/span> :<\\/span> false<\\/span>\n)<\\/span>}<\\/span>\n<\\/code><\\/pre>\nIt's a nice practice to use inner components combined with lists to clean up your code.<\\/p>\nimport<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> List<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n items =<\\/span> [<\\/span>\n {<\\/span>visible<\\/span>:<\\/span> true<\\/span>,<\\/span> number<\\/span>:<\\/span> 1<\\/span>}<\\/span>,<\\/span>\n {<\\/span>visible<\\/span>:<\\/span> false<\\/span>,<\\/span> number<\\/span>:<\\/span> 2<\\/span>}<\\/span>,<\\/span>\n {<\\/span>visible<\\/span>:<\\/span> true<\\/span>,<\\/span> number<\\/span>:<\\/span> 3<\\/span>}<\\/span>\n ]<\\/span>\n\n renderItem<\\/span>(<\\/span>{<\\/span>visible,<\\/span> number}<\\/span><\\/span>)<\\/span> {<\\/span>\n if<\\/span>(<\\/span>!<\\/span>visible)<\\/span> return<\\/span> false<\\/span>;<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>li<\\/span>><\\/span><\\/span> {<\\/span>number}<\\/span> </<\\/span>li<\\/span>><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n \n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>ul<\\/span>><\\/span><\\/span>\n {<\\/span>this<\\/span>.<\\/span>items.<\\/span>map<\\/span>(<\\/span>(<\\/span>item<\\/span>)<\\/span> =><\\/span> <<\\/span>Item<\\/span><\\/span> {<\\/span>...<\\/span>item}<\\/span><\\/span> /><\\/span><\\/span>)<\\/span>}<\\/span>\n </<\\/span>ul<\\/span>><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> List;<\\/span>\n<\\/code><\\/pre>\nInner HTML<\\/a><\\/h2>You can set the inner HTML of an element with the html<\\/code> attribute.<\\/p>\nLinks inside the HTML string will be replaced with routable anchors<\\/a>.<\\/p>\n import<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Post<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n content =<\\/span> `<\\/span>\n <h1> This is a Post </h1>\n <a href=\"/other-post\">\n Check this other post\n </a>\n <\\/span>`<\\/span><\\/span>;<\\/span>\n \n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>article<\\/span> html<\\/span>=<\\/span>{<\\/span>this<\\/span>.<\\/span>content}<\\/span><\\/span> /><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Post;<\\/span>\n<\\/code><\\/pre>\n\n🔥 Be careful! When using user-generated HTML you are in risk of script injection<\\/p>\n<\\/blockquote>\nBody tag<\\/a><\\/h2>Renderable components can render a body<\\/code> tag an unlimited number of times at any depth of the application.<\\/p>\n The body<\\/code> attributes of the body tag that are rendered will be merged into the real body tag in the DOM<\\/p>\nimport<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Application<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n // ...<\\/span>\n\n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>body<\\/span> class<\\/span>=<\\/span>\"<\\/span>bg-black\"<\\/span><\\/span>><\\/span><\\/span>\n {<\\/span>this<\\/span>.<\\/span>modalOpen &&<\\/span>\n <<\\/span>body<\\/span> class<\\/span>=<\\/span>\"<\\/span>overflow-hidden\"<\\/span><\\/span>><\\/span><\\/span>\n <<\\/span>div<\\/span> class<\\/span>=<\\/span>\"<\\/span>modal\"<\\/span><\\/span>><\\/span><\\/span> modal here <<\\/span>div<\\/span>><\\/span><\\/span>\n </<\\/span>body<\\/span>><\\/span><\\/span>\n }<\\/span>\n </<\\/span>body<\\/span>><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Application;<\\/span>\n<\\/code><\\/pre>\nHead tag<\\/a><\\/h2>Renderable components can render inside the head<\\/code> tag an unlimited number of times at any depth of the application.<\\/p>\nimport<\\/span> Nullstack from<\\/span> 'nullstack'<\\/span>;<\\/span>\n\nclass<\\/span> Application<\\/span> extends<\\/span> Nullstack<\\/span> {<\\/span>\n\n // ...<\\/span>\n\n render<\\/span>(<\\/span>)<\\/span> {<\\/span>\n return<\\/span> (<\\/span>\n <<\\/span>main<\\/span>><\\/span><\\/span>\n <<\\/span>div<\\/span>><\\/span><\\/span>\n <<\\/span>head<\\/span>><\\/span><\\/span>\n <<\\/span>link<\\/span> rel<\\/span>=<\\/span>\"<\\/span>preconnect\"<\\/span><\\/span> href<\\/span>=<\\/span>\"<\\/span>https://www.googletagmanager.com\"<\\/span><\\/span> /><\\/span><\\/span>\n </<\\/span>head<\\/span>><\\/span><\\/span>\n </<\\/span>div<\\/span>><\\/span><\\/span>\n <<\\/span>head<\\/span>><\\/span><\\/span>\n <<\\/span>link<\\/span> rel<\\/span>=<\\/span>\"<\\/span>preload\"<\\/span><\\/span> href<\\/span>=<\\/span>\"<\\/span>/roboto-v20-latin-300.woff2\"<\\/span><\\/span> as<\\/span>=<\\/span>\"<\\/span>font\"<\\/span><\\/span> type<\\/span>=<\\/span>\"<\\/span>font/woff2\"<\\/span><\\/span> crossorigin<\\/span> /><\\/span><\\/span>\n <<\\/span>link<\\/span> rel<\\/span>=<\\/span>\"<\\/span>preload\"<\\/span><\\/span> href<\\/span>=<\\/span>\"<\\/span>/crete-round-v9-latin-regular.woff2\"<\\/span><\\/span> as<\\/span>=<\\/span>\"<\\/span>font\"<\\/span><\\/span> type<\\/span>=<\\/span>\"<\\/span>font/woff2\"<\\/span><\\/span> crossorigin<\\/span> /><\\/span><\\/span>\n </<\\/span>head<\\/span>><\\/span><\\/span>\n </<\\/span>main<\\/span>><\\/span><\\/span>\n )<\\/span>\n }<\\/span>\n\n}<\\/span>\n\nexport<\\/span> default<\\/span> Application;<\\/span>\n<\\/code><\\/pre>\n\n🔥 You should not use the head<\\/code> tag to update metatags<\\/a> that Nullstack already controls<\\/p>\n<\\/blockquote>\n","persistent":true,"locale":"en-US","i18n":{"lead":"Have any questions or suggestions?","cta":"Join our Discord","next":"Next Step","learn":"Learn more about"},"description":"Nullstack JSX deviates a little from the spec.","topics":[{"title":"About Nullstack","links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Getting started","href":"/getting-started"}]},{"title":"Core Features","links":[{"title":"Stateless Components","href":"/stateless-components"},{"title":"Stateful components","href":"/stateful-components"},{"title":"Full stack lifecycle","href":"/full-stack-lifecycle"},{"title":"Server functions","href":"/server-functions"},{"title":"Context","href":"/context"},{"title":"Two-way bindings","href":"/two-way-bindings"},{"title":"JSX elements","href":"/jsx-elements"},{"title":"Refs","href":"/refs"},{"title":"Styles","href":"/styles"},{"title":"Persistent Components","href":"/persistent-components"}]},{"title":"Context Keys","links":[{"title":"Routes and params","href":"/routes-and-params"},{"title":"Context data","href":"/context-data"},{"title":"Context instances","href":"/context-instances"},{"title":"Context environment","href":"/context-environment"},{"title":"Context page","href":"/context-page"},{"title":"Context project","href":"/context-project"},{"title":"Context settings","href":"/context-settings"},{"title":"Context secrets","href":"/context-secrets"},{"title":"Server request and response","href":"/server-request-and-response"},{"title":"Service Worker","href":"/service-worker"}]},{"title":"Advanced concepts","links":[{"title":"Proxy","href":"/proxy"},{"title":"Application Startup","href":"/application-startup"},{"title":"Script runner","href":"/script-runner"},{"title":"How to customize Webpack","href":"/how-to-customize-webpack"},{"title":"Transpilation and Security","href":"/transpilation-and-security"},{"title":"TypeScript","href":"/typescript"}]},{"title":"Build Modes","links":[{"title":"Server-side rendering","href":"/server-side-rendering"},{"title":"Static site generation","href":"/static-site-generation"},{"title":"Single page applications","href":"/single-page-applications"}]},{"title":"Other","links":[{"title":"Nullstack Logo","href":"/nullstack-logo"},{"title":"How to deploy","href":"/how-to-deploy-a-nullstack-application"}]}]},"GoogleAnalytics/0-0-0-19":{"persistent":false},"Loader/0-0-0-21":{"persistent":false},"Footer/0-0-0-22":{"persistent":false,"locale":"en-US","i18n":{"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}],"star":{"story":"Want to show your love and help us spread the word?","action":"Leave a star on GitHub"}}}},"context":{"mode":"light","oppositeMode":"dark"}}

Links:

Nullstack	https://nullstack.app/
What is Nullstack?	https://nullstack.app/what-is-nullstack
Documentation	https://nullstack.app/getting-started
Examples	https://nullstack.app/examples
Contributors	https://nullstack.app/contributors
F.A.Q	https://nullstack.app/frequently-asked-questions
Waifu	https://nullstack.app/waifu
Português	https://nullstack.app/pt-br
🇧🇷	https://nullstack.app/pt-br
	https://discord.gg/eDZfKz264v
Star	https://github.com/nullstack/nullstack
What is Nullstack?	https://nullstack.app/what-is-nullstack
Getting started	https://nullstack.app/getting-started
Stateless Components	https://nullstack.app/stateless-components
Stateful components	https://nullstack.app/stateful-components
Full stack lifecycle	https://nullstack.app/full-stack-lifecycle
Server functions	https://nullstack.app/server-functions
Context	https://nullstack.app/context
Two-way bindings	https://nullstack.app/two-way-bindings
JSX elements	https://nullstack.app/jsx-elements
Refs	https://nullstack.app/refs
Styles	https://nullstack.app/styles
Persistent Components	https://nullstack.app/persistent-components
Routes and params	https://nullstack.app/routes-and-params
Context data	https://nullstack.app/context-data
Context instances	https://nullstack.app/context-instances
Context environment	https://nullstack.app/context-environment
Context page	https://nullstack.app/context-page
Context project	https://nullstack.app/context-project
Context settings	https://nullstack.app/context-settings
Context secrets	https://nullstack.app/context-secrets
Server request and response	https://nullstack.app/server-request-and-response
Service Worker	https://nullstack.app/service-worker
Proxy	https://nullstack.app/proxy
Application Startup	https://nullstack.app/application-startup
Script runner	https://nullstack.app/script-runner
How to customize Webpack	https://nullstack.app/how-to-customize-webpack
Transpilation and Security	https://nullstack.app/transpilation-and-security
TypeScript	https://nullstack.app/typescript
Server-side rendering	https://nullstack.app/server-side-rendering
Static site generation	https://nullstack.app/static-site-generation
Single page applications	https://nullstack.app/single-page-applications
Nullstack Logo	https://nullstack.app/nullstack-logo
How to deploy	https://nullstack.app/how-to-deploy-a-nullstack-application
Using HTML attributes	https://nullstack.app/jsx-elements#using-html-attributes
Headless components	https://nullstack.app/jsx-elements#headless-components
Boolean attributes	https://nullstack.app/jsx-elements#boolean-attributes
attributes	https://nullstack.app/context
Element tag	https://nullstack.app/jsx-elements#element-tag
Fragments	https://nullstack.app/jsx-elements#fragments
SVG Elements	https://nullstack.app/jsx-elements#svg-elements
events	https://nullstack.app/stateful-components
Components with children	https://nullstack.app/jsx-elements#components-with-children
instance context	https://nullstack.app/context#the-available-instance-client-keys-are-
Lists	https://nullstack.app/jsx-elements#lists
instance key	https://nullstack.app/instance-self#instance-key
Inner HTML	https://nullstack.app/jsx-elements#inner-html
routable anchors	https://nullstack.app/routes-and-params
Body tag	https://nullstack.app/jsx-elements#body-tag
Head tag	https://nullstack.app/jsx-elements#head-tag
metatags	https://nullstack.app/context-page
Next Step	https://nullstack.app/jsx-elements#next-step
Core Features: Refs	https://nullstack.app/refs
Join our Discord	https://discord.gg/eDZfKz264v
	https://twitter.com/nullstackapp
	https://github.com/nullstack/nullstack
	https://discord.gg/eDZfKz264v
	https://www.youtube.com/nullstack
	https://www.linkedin.com/company/nullstack-app
Leave a star on GitHub	https://github.com/nullstack/nullstack/stargazers

Viewport: width=device-width, initial-scale=1, shrink-to-fit=no

URLs of crawlers that visited me.