static_content_type
Use this Content type, Block type, Paragraph type or SDC type to create components or pages of static content.
Static Content Type
Escape the Drupal Island! Build with React, Vue, Angular, or any modern framework while keeping Drupal's power.
The Static Content Type module revolutionizes how you integrate modern frontend development with Drupal. Instead of being limited to traditional Drupal theming, you can now use any development tool or framework while maintaining Drupal's strengths in content management, user authentication, and routing.
Why Teams Love This Module
- Zero Learning Curve: Drop HTML files in directories and they work
- Any Framework: React, Vue, Angular, Svelte, or vanilla JS
- Build Tool Friendly: Webpack, Vite, Parcel - works with everything
- Production Ready: Automatic precedence system finds optimized builds
- Security First: Built-in sanitization and path processing
- Flexible Deployment: From local development to enterprise CI/CD
Perfect For
Landing Pages & Marketing
Create high-converting pages with modern tools while keeping Drupal's header/footer and user management.
Component Libraries
Integrate your existing design system components seamlessly into Drupal pages.
Interactive Dashboards
Build React/Vue dashboards that work alongside traditional Drupal content.
A/B Testing
Rapidly deploy page variations by simply changing directory names.
Agency Work
Use familiar frontend tools while delivering on Drupal's enterprise features.
Smart Development Workflow
Your Project Directory:
├── src/ ← Develop here with hot reload
├── dist/ ← Build tools output here
├── build/ ← Alternative build output
└── stc.options.yml ← Override settings
The module automatically finds the best version:
1. Production builds (`dist/`, `build/`) take priority
2. Development files (`src/`) used when builds aren't available
3. Fallback processing ensures something always works
Three Ways to Use
1. Nodes - Full Page Content
Visit: /static-content/123
Files: static-content-nodes/123/index.html
2. Blocks & Paragraphs - Reusable Components
Files: static-content-blocks/456/index.html
static-content-paragraphs/789/index.html
3. Twig Functions - Use Anywhere
{{ static_content_type_loader('my-component', 'hardened', 'static-content-twig') }}
Smart Processing Options
- Raw: Use files exactly as-is (fastest)
- Proxied: Fix relative paths automatically (recommended)
- Hardened: Full security sanitization + path fixing (safest)
Flexible Rendering
- PHP Mode: Standard Drupal render arrays (default)
- Twig Mode: Direct HTML injection (bypass Drupal rendering)
- iFrame Mode: Complete isolation (perfect for full HTML documents)
Enterprise Features
Asset Optimization
- Automatic CSS/JS extraction from HTML documents
- Integration with Drupal's asset aggregation
- React deduplication prevents loading multiple instances
Environment Management
- Per-directory configuration overrides
- Support for multiple deployment strategies
- Seamless integration with existing Drupal caching
Developer Experience
- Helpful error messages show exactly where to place files
- Comprehensive logging for debugging
- Works with any build tool or framework
Real-World Success
- "We reduced our frontend development time by 60% while keeping all of Drupal's backend features. Our React components now deploy in minutes, not hours."
- Enterprise Development Team
- "Finally! We can use Storybook for component development and still deliver full Drupal sites to clients."
- Agency Technical Director
Get Started in Minutes
1. Install: `drush en static_content_type`
2. Create: Make a "Static Content" node (note the ID)
3. Build: Add HTML to `static-content-nodes/[ID]/index.html`
4. Visit: Go to `/static-content/[ID]` and see your content
The Future of Drupal Development
Stop choosing between Drupal's power and modern development tools. The Static Content Type module lets you have both, creating a bridge between traditional CMS development and the modern frontend ecosystem.
Whether you're building marketing landing pages, interactive dashboards, or component libraries, this module scales from simple HTML files to enterprise-grade deployment pipelines.
Ready to revolutionize your Drupal development? Install Static Content Type today and start building with the tools you love.
Tags: Frontend, React, Vue, Angular, Components, Modern Development, Build Tools, Webpack, Vite
Features
Provides routing infrastructure for nodes that have static content ?
Allows you to display static in a node.
You might use static nodes to display any type of content Drupal does not support directly like
- React
- Preact
- Vue
- Angular
- Svelte
- Web Components
- Storybook pages
- HTML5 content made using any tool you choose.
You might use the static nodes as temporary placeholders for nodes.
Post-Installation
Once you install it and create pages.
Add a directory to your files area using the node id as a directory name.
If the node ID were 1234 you would create a directory in your public files area named 1234 at a path like this:
files/static-content/1234
Put a stand alone index.html file in there that would display if you opened it in a browser.
files/static-content/1234/index.html
You would put required assets in there as well.
You will need to put a path in your assets for instance.
/sites/default/files/static-content/1234/index.css
/sites/default/files/static-content/1234/index.js
/sites/default/files/static-content/1234/logo.jpeg
Recommended Add-on Module: Static Content Browser
If you are using Static Content Type, you will almost certainly want to install Static Content Browser.
Static Content Browser exists solely to enhance Static Content Type by adding a Drupal-native file management experience for static content files. It only operates within the six directories defined by Static Content Type and does not function independently.
This module was created to solve a common problem: managing static content files safely and conveniently when SFTP access is unavailable, restricted, or undesirable.
With Static Content Browser, site builders and editors can:
- Upload and organize static content assets using drag and drop
- Manage files directly in Drupal without server credentials
- Avoid accidental changes outside the Static Content Type directory structure
Static Content Browser complements, rather than replaces, SFTP-based workflows and is ideal for teams that want tighter control and better usability around static content file management.
https://www.drupal.org/project/static_content_browser
Static Content Browser - File Manager (Add On Module)