phoenix-views-templates

Render Phoenix HEEx templates and views into HTML content.

187|20|Updated Nov 20, 2025

Search Tags:#templates #phoenix #views #heex

Ready to run

npx skills add https://github.com/TheBushidoCollective/han --skill phoenix-views-templates

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: phoenix-views-templates
Source: https://github.com/TheBushidoCollective/han/tree/main/jutsu/jutsu-phoenix/skills/phoenix-views-templates
Command: npx skills add https://github.com/TheBushidoCollective/han --skill phoenix-views-templates

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill teaches HEEx templates and Phoenix view modules for rendering UI.

Core Features & Use Cases

HEEx templates: embeddable Elixir templates.
Function components: Reusable components in HEEx.
Assigns & conditional rendering: Use assigns in templates.

Quick Start

Create a simple Phoenix view with a HEEx template and function component.

Frequently Asked Questions about phoenix-views-templates

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render HTML in Phoenix using HEEx templates?▼

HEEx templates render HTML content in Phoenix web apps through embedded Elixir syntax. Write templates with HEEx markup, use @ assigns for dynamic data, and Phoenix compiles them to HTML output for server-side rendering in views and pages.

Can I build reusable UI components with Phoenix HEEx?▼

Yes. HEEx function components let you create reusable UI building blocks with attr declarations for inputs and slots for flexible content placement. Nest and compose components to build dashboards and pages without repeating template code.

What's the best way to handle conditional and loop logic in Phoenix templates?▼

HEEx templates support if/unless/case conditionals and for loops directly in markup. Combine these with @ assigns to render content conditionally or iterate over data collections, keeping template logic clean and readable.

How do I use assigns to pass data into Phoenix HEEx templates?▼

Assign data in your view module and access it in HEEx templates via @ syntax (e.g., @variable_name). Assigns flow from controller or view into templates, enabling dynamic content and component inputs without manual passing.

Do Phoenix HEEx templates support named slots for flexible layouts?▼

Yes. Named slots in HEEx function components let parent templates inject content into specific regions, enabling flexible and reusable layout patterns across dashboard UI and multi-section page components.

What does embed_templates do in Phoenix views?▼

embed_templates loads HEEx template files into a view module, making them available for rendering. It organizes templates by file path, automates module compilation, and enables clean separation of template code from view logic.