loading table of contents...

Headless Server Developer Manual / Version 2310

Table Of Contents Rendering Markup as Richtext

The detail text is markup and there are multiple npm modules that help with rendering it correctly. But for now it is sufficient to use dangerouslysetinnerhtml, a way of React to set the inner HTML for DOM nodes. Since it is not secure and open for cross-site scripting it is not advised to use it in a real world scenario.

Image and Richtext ready, the article component looks as follows:

const ARTICLE_QUERY = gql`
  query ArticleQuery($articleId: String!) {
    content {
      article(id: $articleId) {
        picture {
          data {

function Article(props) {
  const idFromLink =;
  const articleId = idFromLink ? idFromLink :;

  const { loading, error, data } = useQuery(ARTICLE_QUERY, { variables: { articleId } });

  if (loading) {
    return <p>Loading...</p>;
  if (error) {
    return <p>Error {error}</p>;

  const article = data.content.article;
  const imageUrl = serverUrl +;

  return (
    <div className="article-container">
      <img src={imageUrl} alt="" />
      <p dangerouslySetInnerHTML={{ __html: article.detailText }} />

export default Article;

Example 14.13. Detailview of an article component

pwa example article

Figure 14.2. Screenshot of the article detail page



If you like to dive into more details and to understand some core concepts, please go to The GitHub repository It includes an example app written in TypeScript with routing, view dispatching, preview integration and more.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.