{"id":1311,"date":"2024-09-23T17:41:25","date_gmt":"2024-09-23T15:41:25","guid":{"rendered":"https:\/\/uniquedevs.com\/?p=1311"},"modified":"2024-10-14T15:04:02","modified_gmt":"2024-10-14T13:04:02","slug":"what-is-pug-js-used-for","status":"publish","type":"post","link":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/","title":{"rendered":"What is pug.js used for?"},"content":{"rendered":"\n<p>Pug.js allows you to write reusable HTML code and render dynamic data, making it ideal for server-side applications and websites that require dynamic content generation. It is often used with Express.js for better templating as it compiles to HTML. Using Pug.js with Vue.js simplifies code implementation and readability, and allows for easy migration of existing projects to take advantage of Vue&#8217;s responsiveness.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pug.js &#8211; basics and a quick start introduction to Pug.js syntax and basic concepts<\/h2>\n\n\n\n<p>To get started with Pug.js, it must first be installed using npm: npm install pug. The rendering process in Pug is simple: pug.compile() compiles the Pug source code into a JavaScript function that takes a data object (called \u2018locals\u2019) as an argument. Calling this function with the data returns an HTML string rendered using that data. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/- template.pug\np #{name}'s Pug source code!\nconst pug = require(\u2018pug\u2019);\n\/\/ compiling the source code\nconst compiledFunction = pug.compileFile(\u2018template.pug\u2019);\n\n\n\/\/ Rendering the data set\nconsole.log(compiledFunction({\nname: \u2018Timothy\u2019\n}));\n\/\/ Result: \u2018&lt;p>Timothy's Pug source code!&lt;\/p>\u2019.\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Pug.js &#8211; comparison with other HTML templates<\/h2>\n\n\n\n<p>Compared to other HTML template engines such as Handlebars or <a href=\"https:\/\/uniquedevs.com\/blog\/co-to-jest-mustache-js\/\"><mark>Mustache<\/mark><\/a>, Pug.js offers a more concise and less verbose syntax by using indentation to define the document structure. This is both an advantage and a potential disadvantage &#8211; new users may need time to get used to this syntax. Nevertheless, Pug.js provides powerful features such as template inheritance and mixins that allow for more modular and manageable code.<\/p>\n\n\n                        <div class=\"contact-banner purple\" >\n                <div class=\"contact-banner__image\">\n                    <img decoding=\"async\" src=\"https:\/\/uniquedevs.com\/wp-content\/themes\/uniquedevs\/assets\/images\/purple.webp\" alt=\"Are you looking for a trusted IT company?\">\n                <\/div>\n                <div class=\"contact-banner__image-mobile\">\n                    <img decoding=\"async\" src=\"https:\/\/uniquedevs.com\/wp-content\/themes\/uniquedevs\/assets\/images\/purple-mobile.webp\" alt=\"Are you looking for a trusted IT company?\">\n                <\/div>\n                <div class=\"contact-banner__wprapper\">\n                                            <div class=\"contact-banner__wrapper-title\">\n                            Are you looking for a trusted IT company?                        <\/div>\n                                                                                            <a href=\"https:\/\/uniquedevs.com\/en\/contact\/\" class=\"contact-banner__wrapper-btn\" >\n                                Write to us!                            <\/a>\n                                                            <\/div>\n            <\/div>\n            \n\n\n<h2 class=\"wp-block-heading\">Best practice and optimisation tips for writing clean and efficient code in Pug.js.<\/h2>\n\n\n\n<p>Using best practices when working with Pug.js includes using features such as compile-to-function for reusing templates with different data sets, which improves performance by avoiding recompilation. In addition, it is recommended to use the cache option with the pug.render() function to automatically cache the compiled function, which also improves performance. By taking care to structure your project properly and using template inheritance and blends, you can keep your code clean, organised and easy to reuse, which is key to maintaining the performance and readability of larger-scale projects. Here is a brief summary of best practices for pug.js:<br>-indentation-based syntax: Pug.js uses indentation, which makes the code concise and readable. Remember to use indentation consistently for consistency.<\/p>\n\n\n\n<p>-mixtures and inheritance: Use mixins and template inheritance to create modular code, making it easy to reuse components.<\/p>\n\n\n\n<p>-compile templates to functions: compile Pug templates to JavaScript functions to increase performance by reducing processing time with repeated use.<\/p>\n\n\n\n<p>-using pug.render(): for simpler tasks use pug.render() for direct rendering, but be aware of the performance impact.<\/p>\n\n\n\n<p>-organising template files: structure template files in a logical way, using consistent names and placing related templates together for better readability.<\/p>\n\n\n\n<p>-using HTML5: use semantic HTML5 tags in Pug templates to increase accessibility and understanding by browsers and SEO tools.<\/p>\n\n\n\n<p>-sensitivity to whitespace: be accurate and careful when formatting code due to Pug.js&#8217; sensitivity to whitespace, which can lead to errors when used incorrectly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of Pug.js<\/h2>\n\n\n\n<p>Modularity and components: pug facilitates the creation of modular, reusable components, which is one of its main strengths. Examples of use, such as headers, footers or forms, are apt. However, it is important to point out that effective use of this feature requires good planning of the project structure and conscious template management.<\/p>\n\n\n\n<p>Integration with frontend frameworks: Pug works well with many modern JavaScript frameworks, such as Vue.js, Angular or React. It is worth bearing in mind that with React, the use of Pug may be less straightforward and require additional configuration or tools, as React prefers JSX. Nevertheless, the community has created solutions to integrate Pug with React.<\/p>\n\n\n\n<p>Internationalisation (i18n): integration of Pug with internationalisation tools is possible and can greatly facilitate localisation management in multilingual projects. It is good to stress that an effective implementation of such a solution may require additional software or libraries specialised in i18n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contemporary trends<\/h2>\n\n\n\n<p>In recent years, there has been a noticeable increase in the popularity of JavaScript frameworks such as React, Vue.js or Angular, which bring with them a new component-oriented approach to template rendering. In particular, JSX, which is natively supported in React, is becoming the preferred method for rendering user interfaces in modern applications. This trend is reducing the use of traditional templating engines such as Pug.js, especially for single-page applications. Nevertheless, Pug.js remains a useful tool for projects that require the flexibility to generate dynamic HTML pages on the server side, while offering a simple and concise syntax.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ &#8211; Frequently Asked Questions<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1727106417615\"><strong class=\"schema-faq-question\">Is Pug still being used?<\/strong> <p class=\"schema-faq-answer\">Pug is still a viable option and is also good for practical data use.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1727106436138\"><strong class=\"schema-faq-question\">Is it possible to write JavaScript in Pug?<\/strong> <p class=\"schema-faq-answer\">Yes, you can write JavaScript in Pug in templates to dynamically generate content. Pug supports three types of JavaScript code: <strong>Buffered Code:<\/strong> This is the code that will be displayed as a result. <strong>Unbuffered Code:<\/strong> This is code that will not be displayed in the HTML result. You can use this method to perform logical operations or initialise variables. <strong>Unescaped Buffered Code:<\/strong> If you use <code>!=<\/code>, the JavaScript code will be displayed without escaping, which allows you to embed unformatted HTML in the result: <code>p!= \u2018&lt;strong>Hello&lt;\/strong>\u2019<\/code>Here <code>&lt;strong>Hello&lt;\/strong><\/code> will be displayed as unformatted HTML.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1727106481274\"><strong class=\"schema-faq-question\">Why use Pug instead of HTML?<\/strong> <p class=\"schema-faq-answer\">Pug is a popular template engine that works with your favourite JavaScript libraries and frameworks. Formerly known as Jade, this engine allows developers to write clean, concise and reusable HTML. Pug uses indentation and minimal markup to create templates that are easier to read than traditional HTML.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1727106493422\"><strong class=\"schema-faq-question\">Can I use React instead of Pug?<\/strong> <p class=\"schema-faq-answer\">React and Pug are two different tools used for different purposes, so you cannot directly replace one with the other. Pug is an HTML templating engine, mainly used to generate static and dynamic HTML pages, often in the context of Node.js-based applications. React, on the other hand, is a JavaScript library for building user interfaces, focusing on component rendering. React uses JSX, which is a combination of JavaScript and HTML in a single language, allowing you to write components that generate dynamic HTML code in the user&#8217;s browser. If your application requires dynamic HTML page generation on the server, Pug may be a good choice. If you need to build interactive, dynamic interfaces React may be more suitable.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Pug. js, formerly known as Jade, is a template engine designed for rendering HTML in server-side technologies such as Node. js. Like any JavaScript template engine, Pug. js supports writing reusable HTML code and rendering dynamic data.<\/p>\n","protected":false},"author":2,"featured_media":654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[],"class_list":["post-1311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is pug.js used for? Let`s check! | UniqueDevs<\/title>\n<meta name=\"description\" content=\"Pug. js, formerly known as Jade, is a template engine designed for rendering HTML in server-side technologies such as Node. js. Like any JavaScript template engine, Pug. js supports writing reusable HTML code and rendering dynamic data.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is pug.js used for? Let`s check! | UniqueDevs\" \/>\n<meta property=\"og:description\" content=\"Pug. js, formerly known as Jade, is a template engine designed for rendering HTML in server-side technologies such as Node. js. Like any JavaScript template engine, Pug. js supports writing reusable HTML code and rendering dynamic data.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/\" \/>\n<meta property=\"og:site_name\" content=\"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/Unique-Devs\/61564365418277\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-23T15:41:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-14T13:04:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hubert Olech\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hubert Olech\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/\"},\"author\":{\"name\":\"Hubert Olech\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18\"},\"headline\":\"What is pug.js used for?\",\"datePublished\":\"2024-09-23T15:41:25+00:00\",\"dateModified\":\"2024-10-14T13:04:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/\"},\"wordCount\":1045,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/uniquedevs.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg\",\"articleSection\":[\"Front-end\"],\"inLanguage\":\"en-US\"},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/\",\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/\",\"name\":\"What is pug.js used for? Let`s check! | UniqueDevs\",\"isPartOf\":{\"@id\":\"https:\/\/uniquedevs.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg\",\"datePublished\":\"2024-09-23T15:41:25+00:00\",\"dateModified\":\"2024-10-14T13:04:02+00:00\",\"description\":\"Pug. js, formerly known as Jade, is a template engine designed for rendering HTML in server-side technologies such as Node. js. Like any JavaScript template engine, Pug. js supports writing reusable HTML code and rendering dynamic data.\",\"breadcrumb\":{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106417615\"},{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106436138\"},{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106481274\"},{\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106493422\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage\",\"url\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg\",\"contentUrl\":\"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg\",\"width\":1024,\"height\":683,\"caption\":\"use cases of pug.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/uniquedevs.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-end\",\"item\":\"https:\/\/uniquedevs.com\/en\/blog\/category\/front-end\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What is pug.js used for?\"}]},{\"@type\":\"Website\",\"@id\":\"https:\/\/uniquedevs.com\/#website\",\"url\":\"https:\/\/uniquedevs.com\/\",\"name\":\"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/uniquedevs.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/uniquedevs.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},[],{\"@type\":\"Person\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18\",\"name\":\"Hubert Olech\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uniquedevs.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844\",\"contentUrl\":\"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844\",\"caption\":\"Hubert Olech\"},\"description\":\"Huber Olech - Founder @UniqueDevs. \u0141\u0105cz\u0119 \u015bwiat technologii z biznesem, pomagaj\u0105c firmom rozwija\u0107 si\u0119 dzi\u0119ki innowacyjnym rozwi\u0105zaniom cyfrowym. Pasja do software development zainspirowa\u0142a mnie do zbudowania zespo\u0142u ekspert\u00f3w, z kt\u00f3rymi wsp\u00f3lnie dostarczamy najwy\u017cszej jako\u015bci produkty dla swoich Klient\u00f3w. W oparciu o swoje wieloletnie do\u015bwiadczenie w bran\u017cy IT, rozumiem trendy w nowych technologiach i potrafi\u0119 przeku\u0107 je w wymierne korzy\u015bci dla firm. Moj\u0105 misj\u0105 jest tworzenie rozwi\u0105za\u0144, kt\u00f3re nie tylko usprawniaj\u0105 procesy, ale tak\u017ce otwieraj\u0105 przed Klientami nowe mo\u017cliwo\u015bci rynkowe i zwi\u0119kszaj\u0105 ich konkurencyjno\u015b\u0107.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/hubert-olech-b0a524167\/\"],\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/author\/h-olech\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106417615\",\"position\":1,\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106417615\",\"name\":\"Is Pug still being used?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Pug is still a viable option and is also good for practical data use.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106436138\",\"position\":2,\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106436138\",\"name\":\"Is it possible to write JavaScript in Pug?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, you can write JavaScript in Pug in templates to dynamically generate content. Pug supports three types of JavaScript code: <strong>Buffered Code:<\/strong> This is the code that will be displayed as a result. <strong>Unbuffered Code:<\/strong> This is code that will not be displayed in the HTML result. You can use this method to perform logical operations or initialise variables. <strong>Unescaped Buffered Code:<\/strong> If you use !=, the JavaScript code will be displayed without escaping, which allows you to embed unformatted HTML in the result: p!= \u2018&lt;strong>Hello&lt;\/strong>\u2019Here &lt;strong>Hello&lt;\/strong> will be displayed as unformatted HTML.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106481274\",\"position\":3,\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106481274\",\"name\":\"Why use Pug instead of HTML?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Pug is a popular template engine that works with your favourite JavaScript libraries and frameworks. Formerly known as Jade, this engine allows developers to write clean, concise and reusable HTML. Pug uses indentation and minimal markup to create templates that are easier to read than traditional HTML.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106493422\",\"position\":4,\"url\":\"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106493422\",\"name\":\"Can I use React instead of Pug?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"React and Pug are two different tools used for different purposes, so you cannot directly replace one with the other. Pug is an HTML templating engine, mainly used to generate static and dynamic HTML pages, often in the context of Node.js-based applications. React, on the other hand, is a JavaScript library for building user interfaces, focusing on component rendering. React uses JSX, which is a combination of JavaScript and HTML in a single language, allowing you to write components that generate dynamic HTML code in the user's browser. If your application requires dynamic HTML page generation on the server, Pug may be a good choice. If you need to build interactive, dynamic interfaces React may be more suitable.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is pug.js used for? Let`s check! | UniqueDevs","description":"Pug. js, formerly known as Jade, is a template engine designed for rendering HTML in server-side technologies such as Node. js. Like any JavaScript template engine, Pug. js supports writing reusable HTML code and rendering dynamic data.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"What is pug.js used for? Let`s check! | UniqueDevs","og_description":"Pug. js, formerly known as Jade, is a template engine designed for rendering HTML in server-side technologies such as Node. js. Like any JavaScript template engine, Pug. js supports writing reusable HTML code and rendering dynamic data.","og_url":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/","og_site_name":"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs","article_publisher":"https:\/\/www.facebook.com\/people\/Unique-Devs\/61564365418277\/","article_published_time":"2024-09-23T15:41:25+00:00","article_modified_time":"2024-10-14T13:04:02+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg","type":"image\/jpeg"}],"author":"Hubert Olech","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hubert Olech","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#article","isPartOf":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/"},"author":{"name":"Hubert Olech","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18"},"headline":"What is pug.js used for?","datePublished":"2024-09-23T15:41:25+00:00","dateModified":"2024-10-14T13:04:02+00:00","mainEntityOfPage":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/"},"wordCount":1045,"commentCount":0,"publisher":{"@id":"https:\/\/uniquedevs.com\/#organization"},"image":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage"},"thumbnailUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg","articleSection":["Front-end"],"inLanguage":"en-US"},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/","url":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/","name":"What is pug.js used for? Let`s check! | UniqueDevs","isPartOf":{"@id":"https:\/\/uniquedevs.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage"},"image":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage"},"thumbnailUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg","datePublished":"2024-09-23T15:41:25+00:00","dateModified":"2024-10-14T13:04:02+00:00","description":"Pug. js, formerly known as Jade, is a template engine designed for rendering HTML in server-side technologies such as Node. js. Like any JavaScript template engine, Pug. js supports writing reusable HTML code and rendering dynamic data.","breadcrumb":{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106417615"},{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106436138"},{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106481274"},{"@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106493422"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#primaryimage","url":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg","contentUrl":"https:\/\/uniquedevs.com\/wp-content\/uploads\/2024\/09\/code-1839406_1280-1024x683-1.jpg","width":1024,"height":683,"caption":"use cases of pug.js"},{"@type":"BreadcrumbList","@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/uniquedevs.com\/en\/"},{"@type":"ListItem","position":2,"name":"Front-end","item":"https:\/\/uniquedevs.com\/en\/blog\/category\/front-end\/"},{"@type":"ListItem","position":3,"name":"What is pug.js used for?"}]},{"@type":"Website","@id":"https:\/\/uniquedevs.com\/#website","url":"https:\/\/uniquedevs.com\/","name":"Software House - rozwi\u0105zania IT dla Twojego biznesu | UniqueDevs","description":"","publisher":{"@id":"https:\/\/uniquedevs.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uniquedevs.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},[],{"@type":"Person","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/a2c9b776ac544a910615b03c8b9c4c18","name":"Hubert Olech","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uniquedevs.com\/#\/schema\/person\/image\/","url":"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844","contentUrl":"https:\/\/uniquedevs.com\/wp-content\/litespeed\/avatar\/4aa41b6b162ba5c7c2dc5577af43de87.jpg?ver=1776685844","caption":"Hubert Olech"},"description":"Huber Olech - Founder @UniqueDevs. \u0141\u0105cz\u0119 \u015bwiat technologii z biznesem, pomagaj\u0105c firmom rozwija\u0107 si\u0119 dzi\u0119ki innowacyjnym rozwi\u0105zaniom cyfrowym. Pasja do software development zainspirowa\u0142a mnie do zbudowania zespo\u0142u ekspert\u00f3w, z kt\u00f3rymi wsp\u00f3lnie dostarczamy najwy\u017cszej jako\u015bci produkty dla swoich Klient\u00f3w. W oparciu o swoje wieloletnie do\u015bwiadczenie w bran\u017cy IT, rozumiem trendy w nowych technologiach i potrafi\u0119 przeku\u0107 je w wymierne korzy\u015bci dla firm. Moj\u0105 misj\u0105 jest tworzenie rozwi\u0105za\u0144, kt\u00f3re nie tylko usprawniaj\u0105 procesy, ale tak\u017ce otwieraj\u0105 przed Klientami nowe mo\u017cliwo\u015bci rynkowe i zwi\u0119kszaj\u0105 ich konkurencyjno\u015b\u0107.","sameAs":["https:\/\/www.linkedin.com\/in\/hubert-olech-b0a524167\/"],"url":"https:\/\/uniquedevs.com\/en\/blog\/author\/h-olech\/"},{"@type":"Question","@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106417615","position":1,"url":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106417615","name":"Is Pug still being used?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Pug is still a viable option and is also good for practical data use.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106436138","position":2,"url":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106436138","name":"Is it possible to write JavaScript in Pug?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes, you can write JavaScript in Pug in templates to dynamically generate content. Pug supports three types of JavaScript code: <strong>Buffered Code:<\/strong> This is the code that will be displayed as a result. <strong>Unbuffered Code:<\/strong> This is code that will not be displayed in the HTML result. You can use this method to perform logical operations or initialise variables. <strong>Unescaped Buffered Code:<\/strong> If you use !=, the JavaScript code will be displayed without escaping, which allows you to embed unformatted HTML in the result: p!= \u2018&lt;strong>Hello&lt;\/strong>\u2019Here &lt;strong>Hello&lt;\/strong> will be displayed as unformatted HTML.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106481274","position":3,"url":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106481274","name":"Why use Pug instead of HTML?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Pug is a popular template engine that works with your favourite JavaScript libraries and frameworks. Formerly known as Jade, this engine allows developers to write clean, concise and reusable HTML. Pug uses indentation and minimal markup to create templates that are easier to read than traditional HTML.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106493422","position":4,"url":"https:\/\/uniquedevs.com\/en\/blog\/what-is-pug-js-used-for\/#faq-question-1727106493422","name":"Can I use React instead of Pug?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"React and Pug are two different tools used for different purposes, so you cannot directly replace one with the other. Pug is an HTML templating engine, mainly used to generate static and dynamic HTML pages, often in the context of Node.js-based applications. React, on the other hand, is a JavaScript library for building user interfaces, focusing on component rendering. React uses JSX, which is a combination of JavaScript and HTML in a single language, allowing you to write components that generate dynamic HTML code in the user's browser. If your application requires dynamic HTML page generation on the server, Pug may be a good choice. If you need to build interactive, dynamic interfaces React may be more suitable.","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/1311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/comments?post=1311"}],"version-history":[{"count":5,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/1311\/revisions"}],"predecessor-version":[{"id":1318,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/posts\/1311\/revisions\/1318"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/media\/654"}],"wp:attachment":[{"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/media?parent=1311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/categories?post=1311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uniquedevs.com\/en\/wp-json\/wp\/v2\/tags?post=1311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}