diff --git a/daikoku/app/domain/tenantEntities.scala b/daikoku/app/domain/tenantEntities.scala
index c5625235..69ec2359 100644
--- a/daikoku/app/domain/tenantEntities.scala
+++ b/daikoku/app/domain/tenantEntities.scala
@@ -1737,6 +1737,17 @@ case class CmsPage(
       else if (parentId.nonEmpty && page.id.value == parentId.get)
         FastFuture.successful(("", page.contentType))
       else {
+
+        println(r"""
+            ${
+          Json.stringify(JsArray(Await
+            .result(env.dataStore.apiRepo.forTenant(ctx.tenant).findAllNotDeleted(), 10.seconds)
+            .map(a => {
+              a.copy(description = a.description.replaceAll("\n", "\\n"), smallDescription = a.smallDescription.replaceAll("\n", "\\n"))
+            })
+            .map(_.asJson)))
+        }""")
+
         val context = combineFieldsToContext(
           Context
             .newBuilder(this)
@@ -1746,9 +1757,12 @@ case class CmsPage(
             .combine("connected", ctx.user.map(!_.isGuest).getOrElse(false))
             .combine("user", ctx.user.map(u => u.asSimpleJson).getOrElse(""))
             .combine("request", EntitiesToMap.request(ctx.request))
-            .combine("apis", JsArray(Await
+            .combine("apis", Json.stringify(JsArray(Await
               .result(env.dataStore.apiRepo.forTenant(ctx.tenant).findAllNotDeleted(), 10.seconds)
-              .map(_.asJson)))
+              .map(a => {
+                a.copy(description = a.description.replaceAll("\n", "\\n"), smallDescription = a.smallDescription.replaceAll("\n", "\\n"))
+              })
+              .map(_.asJson))))
             .combine(
               "daikoku-css", {
                 if (env.config.isDev)
@@ -1788,7 +1802,9 @@ case class CmsPage(
         }
 
         val handlebars = new Handlebars().`with`(new EscapingStrategy() {
-          override def escape(value: CharSequence): String = value.toString
+          override def escape(value: CharSequence): String = {
+            value.toString
+          }
         })
 
         handlebars.registerHelper(
diff --git a/manual/docs/04-cli/042-apis-to-business-website/08-define-and-use-a-variable.mdx b/manual/docs/04-cli/042-apis-to-business-website/08-define-and-use-a-variable.mdx
index 0e4b2276..73ef10ac 100644
--- a/manual/docs/04-cli/042-apis-to-business-website/08-define-and-use-a-variable.mdx
+++ b/manual/docs/04-cli/042-apis-to-business-website/08-define-and-use-a-variable.mdx
@@ -51,4 +51,29 @@ Refresh the live preview of your `/apis` page.
 
 Your page text should look the same, and your page title displayed in your browser tab should now read `APIs` instead of `My CMS`
 
-Instead of typing text directly into HTML tags, you just defined and then used a variable in the two sections of your .html file, respectively.
\ No newline at end of file
+Instead of typing text directly into HTML tags, you just defined and then used a variable in the two sections of your .html file, respectively.
+
+# Conditionally render elements
+
+Daikoku includes 3 reserved keywords : `_authenticated`, `_visible` and `_exact`
+
+# _visible
+
+You can use the `_visible` variable to control *wheter or not* to render a page. This can be useful for publishing or hiding a page without removing it from your project.
+
+# _authenticated
+
+You can restrict access to a page for unauthenticated users. If an unauthenticated user tries to access the page, Daikoku will prevent it from rendering and display the `Need to be logged` warning.
+
+# _exact
+
+By default, the router tries to match pages with the nearest paths. You can specify whether or not you want to match the page's path exactly.
+
+Let's take an example:
+
+|Path|Page path|_exact|Matching|
+|--|--|--|--|
+|`/apis/foo`|`/apis`|false|✅
+|`/apis`|`/apis`|false|✅
+|`/apis`|`/apis`|true|✅
+|`/apis/foo`|`/apis`|true|❌
\ No newline at end of file
diff --git a/manual/docs/04-cli/042-apis-to-business-website/09-create-react-component.mdx b/manual/docs/04-cli/042-apis-to-business-website/09-create-react-component.mdx
new file mode 100644
index 00000000..10833b34
--- /dev/null
+++ b/manual/docs/04-cli/042-apis-to-business-website/09-create-react-component.mdx
@@ -0,0 +1,49 @@
+# 9 - Create react component
+
+```html title="src/layouts/react-base.html"
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>My CMS</title>
+
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+</head>
+
+<body>
+  {{children}}
+</body>
+```
+
+```jsx title="src/components/api.jsx"
+function MyAPIs() {
+
+    const apis = JSON.parse("{{apis}}") || []
+
+    return apis.map(api => {
+        return <div key={api.name} className="card bg-base-100 w-96 shadow-xl">
+            <figure>
+                <img
+                    src="https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg"
+                    alt="Shoes" />
+            </figure>
+
+            <div class="card-body">
+                <h2 class="card-title">
+                    {api.name}
+                    <div class="badge badge-secondary">{api.version}</div>
+                </h2>
+                <p>{api.description}</p>
+            </div>
+        </div>
+    })
+}
+
+const container = document.getElementById('apis');
+ReactDOM.createRoot(container).render(<MyAPIs />);
+```
\ No newline at end of file