HTML Includes Previewer

An HTML Includes Previewer is an online tool that simulates Server Side Includes (SSI) functionality directly in your browser. It allows you to write HTML with <!--#include virtual="..." --> directives and instantly see the resolved output, without needing a web server configured for SSI. This is invaluable for frontend developers who want to prototype page layouts with reusable components like headers, footers, and navigation bars before deploying to a server.

SSI (Server Side Includes) is a server-side scripting language used primarily on Apache web servers. It allows you to include the contents of one file into another dynamically at the server level before the page is sent to the browser. Common directives include <!--#include virtual="file.html" --> (for including files), <!--#echo var="..." --> (for displaying variables), and <!--#if expr="..." --> (for conditional logic). SSI is lightweight and doesn't require a full scripting language like PHP.

In SSI, virtual specifies a path relative to the web server's document root (e.g., virtual="/includes/header.html" resolves from the root), while file specifies a path relative to the current document's location (e.g., file="header.html" looks in the same directory). In this previewer tool, both attributes behave similarly — they look up files defined in the Include Files Manager below the editor.

Yes! This tool supports nested includes up to 10 levels deep. If an included file itself contains <!--#include ... --> directives, those will also be resolved recursively. The tool also includes circular reference detection — if file A includes file B and file B includes file A, the tool will detect the loop and stop further resolution, displaying a warning in the preview to help you debug.

Many static site projects and legacy web applications use SSI for templating. Testing SSI includes typically requires a configured Apache/Nginx server. This tool lets you preview and debug include logic instantly without any server setup — perfect for quick prototyping, teaching SSI concepts, debugging include paths, or migrating SSI-based sites to modern frameworks by first understanding the include structure.

This tool primarily focuses on the #include directive, which is the most commonly used SSI feature. Other directives like #echo, #set, #if, #exec, and #flastmod are not currently simulated, as they require server-side context (environment variables, CGI execution, file modification timestamps) that cannot be replicated purely in the browser. For full SSI testing, a local Apache server with mod_include enabled is recommended.

Simply paste your main HTML file content into the left editor panel. The tool will automatically detect any <!--#include ... --> directives. Then, add your included files (like header.html, footer.html, nav.html) using the Include Files Manager below by clicking "Add File" and pasting their content. The right panel shows a live preview of your fully resolved page. You can edit any file at any time and see updates instantly.

Modern alternatives to SSI include: Static Site Generators (Jekyll, Hugo, Eleventy) with templating engines like Liquid or Nunjucks; JavaScript frameworks (React, Vue, Svelte) with component-based architecture; Build tools (Gulp, Webpack) with HTML include plugins; PHP (<?php include 'file.php'; ?>); and iframes or Web Components for client-side includes. SSI remains useful for lightweight server-side includes without needing a full backend stack.

While this tool is designed for SSI <!--#include ... --> syntax, you can adapt it to simulate PHP includes by simply using SSI-style comments in place of PHP include() or require() statements during prototyping. Replace <?php include 'header.php'; ?> with <!--#include virtual="header.php" --> in your draft HTML, define the content in the file manager, and preview the result. The resolved output will look the same.

This tool is excellent for preliminary testing and rapid prototyping of SSI include structures. However, it does not replicate the full Apache SSI environment — it won't process .htaccess settings, MIME types, character encoding headers, or server environment variables. For production-grade SSI testing, you should still validate your includes on an actual Apache server with mod_include enabled and the proper Options +Includes directive set in your server configuration or .htaccess file.