diff --git a/.gitignore b/.gitignore
index 37714aab0..4f8a95ce3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -106,3 +106,4 @@ buildNumber.properties
 # End of https://www.gitignore.io/api/java,maven,eclipse
 
 /.apt_generated/
+/fj-doc-playground-quarkus/src/main/react/public/help/
diff --git a/fj-doc-playground-quarkus/pom.xml b/fj-doc-playground-quarkus/pom.xml
index ff5c2a5aa..a95cf65d3 100644
--- a/fj-doc-playground-quarkus/pom.xml
+++ b/fj-doc-playground-quarkus/pom.xml
@@ -301,15 +301,161 @@
 			</build>
 		</profile>	
 
-
 		<profile>
 
 			<id>buildreact</id>
 
+			<properties>
+				<!-- asciidoc properties -->
+				<asciidoctor.maven.plugin.version>3.1.1</asciidoctor.maven.plugin.version>
+				<asciidoctorj.pdf.version>2.3.19</asciidoctorj.pdf.version>
+				<asciidoctorj.version>3.0.0</asciidoctorj.version>
+				<asciidoctorj.diagram.version>2.3.1</asciidoctorj.diagram.version>
+				<asciidoctorj.diagram-plantuml.version>1.2024.5</asciidoctorj.diagram-plantuml.version>
+				<asciidoctorj.diagram-ditaamini.version>1.0.3</asciidoctorj.diagram-ditaamini.version>
+				<jruby.version>9.4.9.0</jruby.version>
+				<maven.build.timestamp.format>yyyy-MM-dd'T'HH:mm:ss'Z'</maven.build.timestamp.format>
+				<html-output-folder-no-toc>${project.basedir}/src/main/react/public/help</html-output-folder-no-toc>
+				<pdf-output-folder>${html-output-folder-no-toc}</pdf-output-folder>
+			</properties>
+
 			<build>
 
 				<plugins>
 
+					<plugin>
+						<groupId>org.asciidoctor</groupId>
+						<artifactId>asciidoctor-maven-plugin</artifactId>
+						<version>${asciidoctor.maven.plugin.version}</version>
+						<dependencies>
+							<dependency>
+								<groupId>org.asciidoctor</groupId>
+								<artifactId>asciidoctorj-pdf</artifactId>
+								<version>${asciidoctorj.pdf.version}</version>
+							</dependency>
+							<!-- Comment this section to use the default jruby artifact provided by the plugin -->
+							<dependency>
+								<groupId>org.jruby</groupId>
+								<artifactId>jruby</artifactId>
+								<version>${jruby.version}</version>
+							</dependency>
+							<!-- Comment this section to use the default AsciidoctorJ artifact provided by the plugin -->
+							<dependency>
+								<groupId>org.asciidoctor</groupId>
+								<artifactId>asciidoctorj</artifactId>
+								<version>${asciidoctorj.version}</version>
+							</dependency>
+							<dependency>
+								<groupId>org.asciidoctor</groupId>
+								<artifactId>asciidoctorj-diagram</artifactId>
+								<version>${asciidoctorj.diagram.version}</version>
+							</dependency>
+							<dependency>
+								<groupId>org.asciidoctor</groupId>
+								<artifactId>asciidoctorj-diagram-plantuml</artifactId>
+								<version>${asciidoctorj.diagram-plantuml.version}</version>
+							</dependency>
+							<dependency>
+								<groupId>org.asciidoctor</groupId>
+								<artifactId>asciidoctorj-diagram-ditaamini</artifactId>
+								<version>${asciidoctorj.diagram-ditaamini.version}</version>
+							</dependency>
+						</dependencies>
+						<configuration>
+							<requires>
+								<require>asciidoctor-diagram</require>
+							</requires>
+							<resources>
+								<resource>
+									<directory>src/main/docs/asciidoc</directory>
+									<excludes>
+										<exclude>resources/themes/**</exclude>
+									</excludes>
+								</resource>
+							</resources>
+							<sourceDirectory>src/main/docs/asciidoc</sourceDirectory>
+							<enableVerbose>true</enableVerbose>
+							<logHandler>
+								<outputToConsole>true</outputToConsole>
+							</logHandler>
+							<!-- Attributes common to all output formats -->
+							<attributes>
+								<attribute-missing>warn</attribute-missing>
+								<allow-uri-read>true</allow-uri-read>
+								<source-highlighter>rouge</source-highlighter>
+								<imagesdir>./resources/images</imagesdir>
+								<themesdir>./resources/themes</themesdir>
+								<revnumber>${project.version}</revnumber>
+								<revdate>${maven.build.timestamp}</revdate>
+								<revremark>Digital Version</revremark>
+								<organization>${project.organization.name}</organization>
+							</attributes>
+						</configuration>
+						<executions>
+							<execution>
+								<id>asciidoc-to-pdf</id>
+								<phase>generate-resources</phase>
+								<goals>
+									<goal>process-asciidoc</goal>
+								</goals>
+								<configuration>
+									<backend>pdf</backend>
+									<doctype>book</doctype>
+									<sourceDocumentName>index.adoc</sourceDocumentName>
+									<outputDirectory>${pdf-output-folder}</outputDirectory>
+									<outputFile>${project.artifactId}.pdf</outputFile>
+									<attributes>
+										<pdf-theme>basic</pdf-theme>
+										<pdf-themesdir>${project.basedir}/src/main/docs/asciidoc/resources/themes</pdf-themesdir>
+										<icons>font</icons>
+										<pagenums/>
+										<toc/>
+										<idprefix/>
+										<idseparator>-</idseparator>
+									</attributes>
+								</configuration>
+							</execution>
+							<execution>
+								<id>asciidoc-to-html</id>
+								<phase>generate-resources</phase>
+								<goals>
+									<goal>process-asciidoc</goal>
+								</goals>
+							</execution>
+							<execution>
+								<id>asciidoc-to-html-no-toc</id>
+								<phase>generate-resources</phase>
+								<goals>
+									<goal>process-asciidoc</goal>
+								</goals>
+								<configuration>
+									<backend>html5</backend>
+									<outputDirectory>${html-output-folder-no-toc}</outputDirectory>
+									<resources>
+										<resource>
+											<directory>src/main/docs/asciidoc/features/</directory>
+											<excludes>
+												<exclude>resources/themes/**</exclude>
+											</excludes>
+										</resource>
+									</resources>
+									<sourceDirectory>src/main/docs/asciidoc/features/</sourceDirectory>
+									<attributes>
+										<source-highlighter>rouge</source-highlighter>
+										<imagesdir>resources/images</imagesdir>
+										<icons>font</icons>
+										<no-toc/>
+										<sectanchors>true</sectanchors>
+										<!-- set the idprefix to blank -->
+										<idprefix/>
+										<idseparator>-</idseparator>
+										<docinfo1>true</docinfo1>
+									</attributes>
+								</configuration>
+							</execution>
+						</executions>
+					</plugin>
+
 					<plugin>
 						<groupId>org.codehaus.mojo</groupId>
 						<artifactId>exec-maven-plugin</artifactId>
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/attributes/_attributes-common.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/attributes/_attributes-common.adoc
new file mode 100644
index 000000000..cbbd4c101
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/attributes/_attributes-common.adoc
@@ -0,0 +1,14 @@
+:author: Matteo Franci
+:revnumber: v1.0.0
+:revdate: October 15, 2024
+:email: m@fugerit.org
+:description: Venus Online Playground Guide
+:keywords: java, xml, json, yaml, kotlin, pdf, html, xlsx, csv, document generation
+:encoding: utf-8
+:lang: en
+:toc: left
+:hardbreaks-option:
+:sectnums:
+:sectnumlevels: 3
+:!figure-caption:
+:!chapter-signifier:
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/attributes/_attributes-pdf.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/attributes/_attributes-pdf.adoc
new file mode 100644
index 000000000..5fb83ce18
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/attributes/_attributes-pdf.adoc
@@ -0,0 +1 @@
+:doctype: book
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-config-convert.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-config-convert.adoc
new file mode 100644
index 000000000..27cd42ecc
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-config-convert.adoc
@@ -0,0 +1,90 @@
+
+<<<
+[#doc-playground-config-convert]
+== Doc Config Conversion tool
+
+link:https://github.com/fugerit-org/fj-doc[Venus Project] use to have a different configuration setup in teh past
+(previous to version 1.3).
+
+This configuration is still supported, but it's now considered legacy. The *Doc Config Conversion tool* helps to convert the old configuration model to the new one.
+
+The old configuration model, consisted of two different XML files :
+
+=== 1. Doc Process Config File
+
+It starts with _<doc-process/>_ element and looks like :
+
+[source,xml]
+----
+<doc-process>
+	<chain id="shared">
+		<step id="step-01" defaultBehaviour="CONTINUE"
+			description="Apache FreeMarker Configuration"
+			type="org.fugerit.java.doc.freemarker.config.FreeMarkerConfigStep"
+			param01="FJ_DOC_LIB_AUTODOC">
+            <!-- more configuration -->
+		</step>
+    </chain>
+    <!-- more configuration -->
+</doc-process>
+----
+
+=== 2. Doc Handler Config file
+
+[source,xml]
+----
+<doc-handler-config user-catalog="default-complete">
+
+	<factory id="unsafe-test">
+		<data id="html-fm" info="html" type="org.fugerit.java.doc.freemarker.html.FreeMarkerHtmlTypeHandlerUTF8" />
+		<data id="html-fragment-fm" info="fhtml" type="org.fugerit.java.doc.freemarker.html.FreeMarkerHtmlFragmentTypeHandlerUTF8" />
+	</factory>
+
+</doc-handler-config>
+----
+
+The Doc Configuration conversion tool, accept as input the *Doc Process Config* XML file in the first text area, and some parameters in the second text area, like:
+
+[source,text]
+----
+# if stub handers=1, sample type handler configuration will be created
+stub-handler=1
+# docHandlerConfig attributes values
+registerById=true
+allowDuplicatedId=true
+----
+
+The result will be something like :
+
+[source,xml]
+----
+<?xml version="1.0" encoding="utf-8"?>
+<freemarker-doc-process-config
+xmlns="https://freemarkerdocprocess.fugerit.org"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+xsi:schemaLocation="https://freemarkerdocprocess.fugerit.org https://www.fugerit.org/data/java/doc/xsd/freemarker-doc-process-1-0.xsd" >
+
+	<docHandlerConfig registerById="true" allowDuplicatedId="true">
+		<!-- Type handler for markdown format -->
+		<docHandler id="md-ext" info="md" type="org.fugerit.java.doc.base.typehandler.markdown.SimpleMarkdownExtTypeHandler" />
+		<!-- Type henalder for xml format, generates the source xml:doc -->
+		<docHandler id="xml-doc" info="xml" type="org.fugerit.java.doc.base.config.DocTypeHandlerXMLUTF8" />
+
+		<!-- Type handlers for html using freemarker -->
+		<docHandler id="html-fm" info="html" type="org.fugerit.java.doc.freemarker.html.FreeMarkerHtmlTypeHandlerEscapeUTF8" />
+		<!-- Type handlers for html using freemarker (fragment version, only generates body content no html or head part -->
+		<docHandler id="html-fragment-fm" info="fhtml" type="org.fugerit.java.doc.freemarker.html.FreeMarkerHtmlFragmentTypeHandlerEscapeUTF8" />
+	</docHandlerConfig>
+
+
+	<docChain id="shared">
+		<chainStep stepType="config">
+			<config
+				id="FJ_DOC_LIB_AUTODOC"
+			/>
+		</chainStep>
+	</docChain>
+
+
+</freemarker-doc-process-config>
+----
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-conversion.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-conversion.adoc
new file mode 100644
index 000000000..c2b53df05
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-conversion.adoc
@@ -0,0 +1,10 @@
+
+<<<
+[#doc-playground-conversion]
+== Doc Conversion (XML/JSON/YAML)
+
+This page allow conversion from/to XML/JSON/YAML format.
+
+It also allows pretty print.
+
+For istance it is possible to indent XML or JSON format.
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-generator.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-generator.adoc
new file mode 100644
index 000000000..3bf59a61f
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-generator.adoc
@@ -0,0 +1,38 @@
+
+<<<
+[#doc-playground-generator]
+== Doc Editor and Generator
+
+This tool is the core of the application. It gives you the change to really test the link:https://github.com/fugerit-org/fj-doc[Venus Document Generation Framework].
+
+=== 1. Pick a source type
+
+You can pick 5 source options (when choosing one the _Document samples catalog_ will automatically update with relevant examples) :
+
+. link:https://venusdocs.fugerit.org/guide/#doc-freemarker-entry-point[FTLX] - FreeMarker template XML _(*)_
+. link:https://venusdocs.fugerit.org/guide/#doc-format-entry-point-xml[XML]
+. link:https://venusdocs.fugerit.org/guide/#doc-format-entry-point-json-yaml[JSON]
+. link:https://venusdocs.fugerit.org/guide/#doc-format-entry-point-json-yaml[YAML]
+. link:https://venusdocs.fugerit.org/guide/#doc-format-entry-point-kotlin[KTS]
+(Kotlin)
+
+NOTE: _(*)_ Using a freemarker template to generate a link:https://venusdocs.fugerit.org/guide/#doc-format-entry-point[DOC XML Format] is the best supported scenario. Other input options are mainly for people not familiar with XML or Apache FreeMarker.
+
+=== 2. Pick an output format
+
+You can choose among multiple output format. Each based on a specific link:https://venusdocs.fugerit.org/guide/#doc-handler-module-handlers[Doc Handler].
+
+
+=== 3. Customize the input
+
+Creato or modify input source. (For FTLX and KTS add JSON data model if you want).
+
+=== 4. Generate document
+
+Click on the *Generate document*, usually preview or download options will be available.
+
+In case of error, a message will be shown.
+
+=== Extra : Validate document
+
+XML, JSON and YAML document support the _Validate document_ function.
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-project-init.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-project-init.adoc
new file mode 100644
index 000000000..55c71be94
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-project-init.adoc
@@ -0,0 +1,22 @@
+
+<<<
+[#doc-playground-project-init]
+== Doc Project Initialization
+
+This function is user interface for the link:https://venusdocs.fugerit.org/guide/#maven-plugin-goal-init[Venus Maven Plugin : Init Goal].
+
+For instance selecting :
+
+- *Group ID* : org.example.demo
+- *Artifact ID* : venus-demo
+- *Project Version* : 1.0.0
+- *Java Version* : 17
+- *Venus Version* : 8.11.2
+- *Flavour* : Quarkus 3
+- *Extensions* : fj-doc-base,fj-doc-freemarker,fj-doc-mod-fop (1)
+
+Will creates a new link:https://quarkus.io/[Quarkus 3] project with support and examples to generate documents in MarkDown, HTML, AsciiDOC, XSL-FO and PDF.
+
+The project will be a single zip containing a maven project and all the needed resource with a proof of concept document generation. (in a similar way to link:https://start.spring.io/[Spring Initializr] or link:https://code.quarkus.io/[Quarkus Project Launcher]).
+
+(1) Check the documentation to know which formats are supported by each link:https://venusdocs.fugerit.org/guide/#doc-handler-module-handlers[module].
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-type-validator.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-type-validator.adoc
new file mode 100644
index 000000000..f4eea2dbc
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/doc-type-validator.adoc
@@ -0,0 +1,11 @@
+
+<<<
+[#doc-playground-type-validator]
+== Doc Type Validator
+
+The Doc Type Validator helper, is a simple interface to test the
+link:https://github.com/fugerit-org/fj-doc/tree/main/fj-doc-val[Doc Type Validator modules].
+
+Simply upload a file (on the left) to check if it is valid according to one of the supported formats (on the right).
+
+NOTE: This is just a demo version. Currently really useful for any real scenario.
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/home.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/home.adoc
new file mode 100644
index 000000000..ff48e1474
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/features/home.adoc
@@ -0,0 +1,10 @@
+
+<<<
+[#doc-playground-home]
+== Playground for Venus - Fugerit Doc Generation Framework
+
+This is the link:https://github.com/fugerit-org/fj-doc[Venus] Online Playground.
+
+It is possible to run it locally too using the pre-buildt link:https://hub.docker.com/r/fugeritorg/fj-doc-playground-quarkus[Docker images].
+
+NOTE: for full documentation check the link:https://venusdocs.fugerit.org/guide/[online guide].
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/index.adoc b/fj-doc-playground-quarkus/src/main/docs/asciidoc/index.adoc
new file mode 100644
index 000000000..fba9a3c80
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/index.adoc
@@ -0,0 +1,13 @@
+= Fugerit Online Playground Guide
+// format attributes inclusions
+include::attributes/_attributes-pdf.adoc[]
+include::attributes/_attributes-common.adoc[]
+
+// Chapters inclusions
+
+include::features/home.adoc[]
+
+
+include::features/doc-type-validator.adoc[]
+
+include::features/doc-config-convert.adoc[]
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/images/readme.txt b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/images/readme.txt
new file mode 100644
index 000000000..b27a99691
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/images/readme.txt
@@ -0,0 +1 @@
+images go here
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/basic-theme.yml b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/basic-theme.yml
new file mode 100644
index 000000000..4c12d176c
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/basic-theme.yml
@@ -0,0 +1,42 @@
+extends:
+  - default-with-fallback-font
+cover:
+  front:
+    image: image:book_cover_basic_v1.0.0.jpeg[page=2]
+  back:
+    image: image:book_cover_back_basic_v1.0.0.png[fit=fill]
+title-page: false
+page:
+  margin: [ 0.75in, 0.75in, 0.75in, 0.75in ]
+base:
+  line-height-length: 20
+heading:
+  font-color: #C50505
+  font-size: 12
+  line-height: 1.2
+link:
+  font-color: #0e86d8
+header:
+  height: 0.75in
+  line-height: 1
+  recto:
+    right:
+      content: '{document-title} | v{revnumber}'
+  verso:
+    left:
+      content: '{document-title} | v{revnumber}'
+footer:
+  height: 0.75in
+  line-height: 1
+  recto:
+    right:
+      content: '{chapter-title} | *{page-number}*'
+  verso:
+    left:
+      content: '*{page-number}* | {chapter-title}'
+image:
+  align: center
+caption:
+  align: center
+  font-color: #C50505
+  font-size: 10
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/book_cover_back_basic_v1.0.0.png b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/book_cover_back_basic_v1.0.0.png
new file mode 100644
index 000000000..2272ec2e2
Binary files /dev/null and b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/book_cover_back_basic_v1.0.0.png differ
diff --git a/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/book_cover_basic_v1.0.0.jpeg b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/book_cover_basic_v1.0.0.jpeg
new file mode 100644
index 000000000..3aedf62df
Binary files /dev/null and b/fj-doc-playground-quarkus/src/main/docs/asciidoc/resources/themes/book_cover_basic_v1.0.0.jpeg differ
diff --git a/fj-doc-playground-quarkus/src/main/react/src/App.jsx b/fj-doc-playground-quarkus/src/main/react/src/App.jsx
index 48ab5356c..42b396cf2 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/App.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/App.jsx
@@ -12,7 +12,7 @@ const TITLE = 'Venus (fj-doc) playground';
 
 function App() {
 
-    const [state, setState] = useState({ currentState: themes.at( 0 ).theme });
+    const [state, setState] = useState({ currentState: themes.at( 2 ).theme });
 
     return (
         <ThemeProvider theme={state.currentState}>
diff --git a/fj-doc-playground-quarkus/src/main/react/src/Playground.jsx b/fj-doc-playground-quarkus/src/main/react/src/Playground.jsx
index 6153fca0a..1c4aa8c61 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/Playground.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/Playground.jsx
@@ -1,4 +1,5 @@
 import React, { useState, Fragment } from 'react';
+import PageHelp from './common/PageHelp'
 
 import {
 	BrowserRouter as Router,
@@ -20,6 +21,9 @@ const homepage = '/fj-doc-playground/home';
 
 const Playground = () => {
 
+	const [helpContent, setHelpContent] = useState('home');
+	const [buttonText, setButtonText] = useState('?');
+
 	const [dialogMessage, setDialogMessage] = useState(null)
 
 	const handleCloseDialog = () => {
@@ -46,10 +50,15 @@ const Playground = () => {
 
 					<Version/>
 
-					<Grid container spacing={4} columns={{ xs: 16 }}>
-					  <Grid item xs={3}><Link to={homepage}><Button color="primary">Home</Button></Link></Grid>
-					  <Grid item xs={4}><Link to={homepage + "/doc_fun/doc_xml_editor"}><Button color="primary">Doc editor and generator</Button></Link></Grid>
-					  <Grid item xs={4}>
+					<Grid container spacing={4} columns={{ xs: 12 }}>
+					  <Grid item xs={1}>
+						  <PageHelp buttonText={buttonText} helpContent={helpContent}/>
+					  </Grid>
+						<Grid item xs={2}>
+							<Link to={homepage}><Button color="primary">Home</Button></Link>
+						</Grid>
+					  <Grid item xs={3}><Link to={homepage + "/doc_fun/doc_xml_editor"}><Button color="primary">Doc editor and generator</Button></Link></Grid>
+					  <Grid item xs={3}>
 						  <Select id='conversionSelect' defaultValue='def'>
 							  <MenuItem id='def' selected={true} value='def'><Link to={homepage + "/doc_fun/doc_conversion"}><Button color="primary">Doc Conversion (XML/JSON/YAML)</Button></Link></MenuItem>
 							  <MenuItem id='xmlToXml' selected={true} value='xmlToXml'><Link to={homepage + "/doc_fun/doc_conversion_x2x"}><Button color="primary">Doc Conversion (XML to XML)</Button></Link></MenuItem>
@@ -57,7 +66,7 @@ const Playground = () => {
 							  <MenuItem id='yamlToYaml' selected={true} value='yamlToYaml'><Link to={homepage + "/doc_fun/doc_conversion_y2y"}><Button color="primary">Doc Conversion (YAML to YAML)</Button></Link></MenuItem>
 						  </Select>
 					  </Grid>
-					  <Grid item xs={4}>
+					  <Grid item xs={3}>
 							<Select id='toolSelect' defaultValue='def'>
 								<MenuItem id='docProjectInit' selected={true} value='def'><Grid item xs={4}><Link to={homepage + "/doc_fun/doc_project_init"}><Button color="primary">Doc project init</Button></Link></Grid></MenuItem>
 								<MenuItem id='docValidator' selected={true} value='docValidator'><Grid item xs={4}><Link to={homepage + "/doc_fun/doc_type_validator"}><Button color="primary">Doc Type Validator</Button></Link></Grid></MenuItem>
@@ -71,15 +80,15 @@ const Playground = () => {
 					{dialog}
 	
 					<Routes>
-						<Route path={homepage + "/doc_fun/doc_xml_editor"} element={<DocXmlEditor handleOpenDialog={handleOpenDialog} />} />
-						<Route path={homepage + "/doc_fun/doc_conversion"} element={<DocConversion handleOpenDialog={handleOpenDialog} />} key='def' />
-						<Route path={homepage + "/doc_fun/doc_conversion_x2x"} element={<DocConversion handleOpenDialog={handleOpenDialog} key='x2x' from='XML' to='XML' />} />
-						<Route path={homepage + "/doc_fun/doc_conversion_j2j"} element={<DocConversion handleOpenDialog={handleOpenDialog} key='j2j' from='JSON' to='JSON' />} />
-						<Route path={homepage + "/doc_fun/doc_conversion_y2y"} element={<DocConversion handleOpenDialog={handleOpenDialog} key='y2y' from='YAML' to='YAML' />} />
-						<Route path={homepage + "/doc_fun/doc_type_validator"} element={<DevValTestForm handleOpenDialog={handleOpenDialog} />} />
-						<Route path={homepage + "/doc_fun/doc_config_convert"} element={<DocConfigConvert handleOpenDialog={handleOpenDialog} />} />
-						<Route path={homepage + "/doc_fun/doc_project_init"} element={<DocProjectInit handleOpenDialog={handleOpenDialog} />} />
-						<Route path="*" element={<Home />} />
+						<Route path={homepage + "/doc_fun/doc_xml_editor"} element={<DocXmlEditor handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent}/>} />
+						<Route path={homepage + "/doc_fun/doc_conversion"} element={<DocConversion handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent}/>} key='def' />
+						<Route path={homepage + "/doc_fun/doc_conversion_x2x"} element={<DocConversion handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent} key='x2x' from='XML' to='XML' />} />
+						<Route path={homepage + "/doc_fun/doc_conversion_j2j"} element={<DocConversion handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent} key='j2j' from='JSON' to='JSON' />} />
+						<Route path={homepage + "/doc_fun/doc_conversion_y2y"} element={<DocConversion handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent} key='y2y' from='YAML' to='YAML' />} />
+						<Route path={homepage + "/doc_fun/doc_type_validator"} element={<DevValTestForm handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent}/>} />
+						<Route path={homepage + "/doc_fun/doc_config_convert"} element={<DocConfigConvert handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent}/>} />
+						<Route path={homepage + "/doc_fun/doc_project_init"} element={<DocProjectInit handleOpenDialog={handleOpenDialog} setHelpContent={setHelpContent}/>} />
+						<Route path="*" element={<Home setHelpContent={setHelpContent}/>} />
 					</Routes>
 
 				</div>
diff --git a/fj-doc-playground-quarkus/src/main/react/src/common/PageHelp.jsx b/fj-doc-playground-quarkus/src/main/react/src/common/PageHelp.jsx
new file mode 100644
index 000000000..008c71448
--- /dev/null
+++ b/fj-doc-playground-quarkus/src/main/react/src/common/PageHelp.jsx
@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import PropTypes from 'prop-types';
+function PageHelp({ buttonText, helpContent }) {
+
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const [helpText, setHelpText] = useState(null);
+
+    useEffect(() => {
+        fetch('/fj-doc-playground/home/help/'+helpContent+'.html')
+            .then((response) => response.text())
+            .then((data) => setHelpText(data))
+            .catch((error) => console.error('Error fetching HTML file:', error));
+    }, [ helpContent ]);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <div>
+      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+        {buttonText}
+      </Button>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+          <Typography sx={{p: 2}}>
+              <div dangerouslySetInnerHTML={{__html: helpText}}/>
+          </Typography>
+      </Popover>
+    </div>
+  );
+}
+
+PageHelp.propTypes = {
+  buttonText: PropTypes.string.isRequired,
+  helpContent: PropTypes.string.isRequired,
+};
+
+export default PageHelp;
\ No newline at end of file
diff --git a/fj-doc-playground-quarkus/src/main/react/src/playground/DocConfigConvert.jsx b/fj-doc-playground-quarkus/src/main/react/src/playground/DocConfigConvert.jsx
index 210617f8d..4a96f5d50 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/playground/DocConfigConvert.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/playground/DocConfigConvert.jsx
@@ -11,7 +11,7 @@ import "ace-builds/src-noconflict/mode-markdown";
 import "ace-builds/src-noconflict/theme-xcode";
 import "ace-builds/src-noconflict/ext-language_tools";
 
-const DocConfigConvert = ({handleOpenDialog}) => {
+const DocConfigConvert = ({handleOpenDialog, setHelpContent}) => {
 
 	const [docContent, setDocContent] = useState('')
 	const [docOutput, setDocOutput] = useState('')
@@ -19,7 +19,8 @@ const DocConfigConvert = ({handleOpenDialog}) => {
 	const [outputMessage, setOutputMessage] = useState(null)
 
 	useEffect(() => {
-		loadStub()
+		loadStub();
+		setHelpContent('doc-config-convert');
 	}, []);
 
 	const loadStub = () => {
diff --git a/fj-doc-playground-quarkus/src/main/react/src/playground/DocConversion.jsx b/fj-doc-playground-quarkus/src/main/react/src/playground/DocConversion.jsx
index 0a3f9fc44..8b118d844 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/playground/DocConversion.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/playground/DocConversion.jsx
@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, {useState, Fragment, useEffect} from 'react';
 import { FormControl, Select, MenuItem, Grid, FormLabel, Button } from "@mui/material";
 import DocCatalog from './DocCatalog';
 import appService from '../common/app-service';
@@ -11,7 +11,11 @@ import "ace-builds/src-noconflict/mode-yaml";
 import "ace-builds/src-noconflict/theme-xcode";
 import "ace-builds/src-noconflict/ext-language_tools";
 
-const DocConversion = ({handleOpenDialog, key, from, to}) => {
+const DocConversion = ({handleOpenDialog, key, from, to, setHelpContent}) => {
+
+	useEffect(() => {
+		setHelpContent('doc-conversion');
+	}, [])
 
 	const [inputFormat, setInputFormat] = useState(from == null ? 'XML' : from)
 	const [outputFormat, setOutputFormat] = useState(from == null ? 'JSON' : from)
diff --git a/fj-doc-playground-quarkus/src/main/react/src/playground/DocProjectInit.jsx b/fj-doc-playground-quarkus/src/main/react/src/playground/DocProjectInit.jsx
index bfc4e1012..be92d17aa 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/playground/DocProjectInit.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/playground/DocProjectInit.jsx
@@ -11,7 +11,11 @@ import { Grid, Typography } from '@mui/material';
 import Alert from '@mui/material/Alert';
 import appService from '../common/app-service';
 
-const DocProjectInit = () => {
+const DocProjectInit = ({setHelpContent}) => {
+
+	useEffect(() => {
+		setHelpContent('doc-project-init');
+	}, [])
 
     const availableVersions = [ '8.11.2', '8.10.9', '8.10.0', '8.9.7', '8.9.0', '8.8.9', '8.8.0', '8.7.6' ];
 
diff --git a/fj-doc-playground-quarkus/src/main/react/src/playground/DocValTestForm.jsx b/fj-doc-playground-quarkus/src/main/react/src/playground/DocValTestForm.jsx
index 8694165af..8672e9f45 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/playground/DocValTestForm.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/playground/DocValTestForm.jsx
@@ -2,13 +2,14 @@ import React, { useState, useEffect, Fragment } from 'react';
 import { Input, Grid, FormLabel, Button, List, ListItem, ListItemText } from "@mui/material";
 import appService from '../common/app-service';
 
-const DocValTestForm = () => {
+const DocValTestForm = ({setHelpContent}) => {
 
 	const [fileToValidate, setFileToValidate] = useState(null)
 	const [supportedExtensions, setSupportedExtensions] = useState(null)
 	const [validationResult, swtValidationResult] = useState(null)
 
 	useEffect(() => {
+		setHelpContent('doc-type-validator');
 		appService.doAjaxMultipart('GET', '/val/supported_extensions', null).then(response => {
 			if (response.success) {
 				setSupportedExtensions( response.result )
diff --git a/fj-doc-playground-quarkus/src/main/react/src/playground/DocXmlEditor.jsx b/fj-doc-playground-quarkus/src/main/react/src/playground/DocXmlEditor.jsx
index d05ea1006..1a4585924 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/playground/DocXmlEditor.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/playground/DocXmlEditor.jsx
@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import { FormControl, Select, MenuItem, TextField, Grid, FormLabel, Button } from "@mui/material";
 import DocCatalog from './DocCatalog';
 import appService from '../common/app-service';
@@ -15,7 +15,11 @@ import "ace-builds/src-noconflict/mode-markdown";
 import "ace-builds/src-noconflict/theme-xcode";
 import "ace-builds/src-noconflict/ext-language_tools";
 
-const DocXmlEditor = ({handleOpenDialog}) => {
+const DocXmlEditor = ({handleOpenDialog, setHelpContent}) => {
+
+	useEffect(() => {
+		setHelpContent('doc-generator');
+	}, [])
 
 	const [inputFormat, setInputFormat] = useState('FTLX')
 	const [outputFormat, setOutputFormat] = useState('HTML')
diff --git a/fj-doc-playground-quarkus/src/main/react/src/playground/Home.jsx b/fj-doc-playground-quarkus/src/main/react/src/playground/Home.jsx
index 5616bb8e8..157268e1f 100644
--- a/fj-doc-playground-quarkus/src/main/react/src/playground/Home.jsx
+++ b/fj-doc-playground-quarkus/src/main/react/src/playground/Home.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, {Fragment, useEffect} from 'react';
 
 import { Link } from "react-router-dom";
 
@@ -18,13 +18,18 @@ import PermDataSettingIcon from '@mui/icons-material/PermDataSetting';
 import AllInclusiveIcon from '@mui/icons-material/AllInclusive';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import Info from './Info';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 
 
 const homepage = '/fj-doc-playground/home';
 
 const cmdDockerRun = 'docker run -it -p 8080:8080 --name fj-doc-playground-quarkus fugeritorg/fj-doc-playground-quarkus:snapshot';
 
-const Home = () => {
+const Home = ({setHelpContent}) => {
+
+	useEffect(() => {
+		setHelpContent('home');
+	}, [])
 
 	return <Fragment>
 		<h1>This is a playground for <a href="https://github.com/fugerit-org/fj-doc">Venus (fj-doc)</a> project.</h1>
@@ -104,11 +109,15 @@ const Home = () => {
 				Note : See <a href="https://hub.docker.com/repository/docker/fugeritorg/fj-doc-playground-quarkus/general">docker repository</a> for more tags (for instance 'latest' stable or specific version).
 		  </Grid>
 		  <Grid item xs={12} align="left">
-				<p>For general documentation on Venus, see <a href="https://venusdocs.fugerit.org/guide/">Venus Docs</a> and <a href="https://venusdocs.fugerit.org/guide/#doc-format-entry-point">Doc Format Summary</a></p>
+			  <p>
+				  Here you can find the guide to this playground in
+				  <a href={"/fj-doc-playground/home/help/fj-doc-playground-quarkus.pdf"}><PictureAsPdfIcon/></a> format.
+				  For general documentation on Venus, see <a href="https://venusdocs.fugerit.org/guide/">Venus Docs</a>
+				  and <a href="https://venusdocs.fugerit.org/guide/#doc-format-entry-point">Doc Format Summary</a></p>
 		  </Grid>
-		  <Grid item xs={12} align="left">
+			<Grid item xs={12} align="left">
 				<Info/>
-		  </Grid>
+			</Grid>
 		</Grid>
 
 	</Fragment>