{"id":4312,"date":"2024-11-01T08:48:04","date_gmt":"2024-11-01T13:48:04","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4312"},"modified":"2024-11-01T08:48:05","modified_gmt":"2024-11-01T13:48:05","slug":"templ","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/templ\/","title":{"rendered":"Templ"},"content":{"rendered":"\n<p>I enjoy writing code in Go, but an easy critique of it is <a href=\"https:\/\/pkg.go.dev\/text\/template\">templating<\/a> doesn&#8217;t feel good. I&#8217;ve only just heard of <a href=\"https:\/\/templ.guide\/\">Templ<\/a> and it looks fabulous. You make <code>.templ<\/code> files which contain what look like JSX functions. They take typed params and have an implied return of the HTML they contain<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Go\" data-shcb-language-slug=\"go\"><span><code class=\"hljs language-go\">templ headerTemplate(name <span class=\"hljs-keyword\">string<\/span>) {\n  &lt;header id=<span class=\"hljs-string\">\"site-header\"<\/span>&gt;\n    &lt;h1&gt;{ name }&lt;\/h1&gt;\n  &lt;\/header&gt;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Go<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">go<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>These <code>.templ<\/code> files compile into Go code then you use them there. It looks so smoothly ergonomic, especially how other code\/logic is incorporated (just&#8230; start a line with code, not an angle bracket). It&#8217;s one of those bits of tech that make me want to find an excuse to use it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I enjoy writing code in Go, but an easy critique of it is templating doesn&#8217;t feel good. I&#8217;ve only just heard of Templ and it looks fabulous. You make .templ files which contain what look like JSX functions. They take typed params and have an implied return of the HTML they contain These .templ files [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[253,254,151],"class_list":["post-4312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-go","tag-templ","tag-template"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/templ.png?fit=1262%2C596&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=4312"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4312\/revisions"}],"predecessor-version":[{"id":4315,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4312\/revisions\/4315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4313"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=4312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=4312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=4312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}