Content modeling
Create content type, define your content structure and generate the form for content authors to edit content
- Support for composition, mixins, inheritance to ease modeling, and re-utilization
- Tons of options for each property: mandatory, read-only, shared by all languages
- Plenty of selectors available: text fields, areas, rich text, date, dropdowns, tags, colors, trees, ..
- Client-side and server-side validation
[solidTemplate:heroSection] > jnt:content
- title (string) = i18n
- paragraph (string) = i18n
- button1Text (string) = i18n
- button1Link (weakreference) < jnt:page
Example of a simple content type definition
Use React JSX for templating
Jahia provides a presentation layer, a “head” that you can use to build complete web pages or HTML fragments
import {useServerContext, getNodeProps} from '@jahia/js-server-core';
export const HeroSection = () => {
const {currentNode, renderContext} = useServerContext();
const props = getNodeProps(currentNode, ['title', 'paragraph']);
return (
<div className="hero">
<h1>{props.title}</h1>
<p>{props.paragraph}</p>
</div>
);
}
HeroSection.jahiaComponent = {
nodeType: 'solidTemplate:heroSection',
name: 'heroSection',
displayName: 'Hero Section',
componentType: 'view'
}
Server-side JSX to display the title and the paragraph of a content item
- Build "views” (render content items to HTML) in React JSX, executed server-side
- Use React Hydration to add client-side interactivity, or any other client-side framework such as HTMX
- Deploy JavaScript modules including content types, views, templates, locales, etc..
- Your changes are automatically deployed when you code, using yarn watch
- Build Content Delivery Network (CDN) compliant websites
- Maintain top performance on high-traffic websites with our multi-layered caching subsystem
- Java modules & JSP are available for developers who prefer Java
Client-side options
Adding interactivity doesn't have to be messy
- Run client-side rendering with React
- Use React hydration: pretender on server, rerender on client
- Use HTMX: Render HTML fragments called by HTMX markups
- Work in full headless: Build SPAs in Vue, Angular or Svelte. deploy them on Jahia or another server.
Content API for Headless Usage
query highlightTitle {
jcr {
nodeByPath(
path: "/sites/digitall/home/area-main/highlights/our-companies"
) {
title: property(language: "en",
name: "jcr:title") {
value
}
}
}
}
Example: Access a content property using GraphQL
Create content and access it via GraphQL API
- Read content using direct access (path, id) or flexible queries
- Write and publish (mutations) content
- Configure, administrate, Jahia is an API first product
- Extend the API using Java Jahia modules (OSGi bundles)