Component Patterns

Building reusable UI components.

Why Use Partials?

Partials are reusable EJS fragments that you include in other templates. Instead of repeating the same HTML structure across multiple pages, you write it once and include it wherever needed.


<!-- views/partials/header.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>

Now every page can include this header without duplicating the HTML boilerplate.


<%- include('partials/header') %>

<h1>Page Content Here</h1>

<%- include('partials/footer') %>

Try it Yourself →

Building a Reusable Navbar

A navigation bar appears on every page. Create it once as a partial and pass the active page to highlight the current link.


<!-- views/partials/nav.ejs -->
<nav class="navbar">
  <a href="/" class="<%= active === 'home' ? 'active' : '' %>">Home</a>
  <a href="/about" class="<%= active === 'about' ? 'active' : '' %>">About</a>
  <a href="/contact" class="<%= active === 'contact' ? 'active' : '' %>">Contact</a>
</nav>

Include it in your pages and pass the active state.


<%- include('partials/nav', { active: 'home' }) %>

Try it Yourself →

Card Components

Card components are perfect for displaying structured information like products, articles, or user profiles. Create a reusable card partial.


<!-- views/partials/card.ejs -->
<div class="card">
  <h3><%= title %></h3>
  <p><%= description %></p>
  <a href="<%= link %>" class="btn">Learn More</a>
</div>

Use it anywhere by passing the required data.


<%- include('partials/card', { 
  title: 'EJS Tutorial', 
  description: 'Learn how to use EJS templates.', 
  link: '/tutorials/ejs' 
}) %>

Form Helpers

Forms often share the same structure for inputs, labels, and error messages. A form helper partial eliminates repetitive code.


<!-- views/partials/formField.ejs -->
<div class="form-group">
  <label for="<%= id %>"><%= label %></label>
  <input type="<%= type || 'text' %>" 
         id="<%= id %>" 
         name="<%= name %>" 
         value="<%= value || '' %>">
  <% if (error) { %>
    <span class="error"><%= error %></span>
  <% } %>
</div>

Build complete forms using this helper.


<form action="/register" method="POST">
  <%- include('partials/formField', { 
    id: 'username', label: 'Username', name: 'username', error: null 
  }) %>
  <%- include('partials/formField', { 
    id: 'email', label: 'Email', name: 'email', type: 'email', error: null 
  }) %>
  <button type="submit">Register</button>
</form>

Try it Yourself →

Building a Component Library

As your project grows, organize partials into folders by type. This creates a component library you can reuse across projects.


views/
  partials/
    buttons/
      primary.ejs
      secondary.ejs
    forms/
      input.ejs
      select.ejs
    layout/
      header.ejs
      footer.ejs
      nav.ejs

Include them with their folder path.


<%- include('partials/buttons/primary', { text: 'Submit' }) %>
<%- include('partials/forms/input', { id: 'name', label: 'Name' }) %>

This structure scales well and makes your templates clean and maintainable.

← Middleware and Views

Data Binding →