docs(xml): add placeholder for editor docs (#8910)

2026-05-22 23:37:43 +08:00 · 2025-09-23 13:37:11 +02:00
parent 4c74f68154
commit 751e740289
22 changed files with 317 additions and 19 deletions
@@ -0,0 +1,22 @@
+.. _editor_hotkeys:
+
+========
+Overview
+========
+
+TODO: describe the purpose and advantages, it's related to XML, has tools (CLI, online share, figma), 3-4 paragraph
+
+Getting started
+***************
+
+TODO Work on Windows, Linux, MacOS and VSCode. Link the guides.
+
+Check out the examples (Learn by examples page)
+or laern more about XML
+
+Project
+*******
+
+What is a project? What can you describe in project.xml? How does nested projects work?
+
+
@@ -0,0 +1,14 @@
+.. _editor:
+
+=========
+UI Editor
+=========
+
+.. toctree::
+    :class:    toctree-1-deep
+    :maxdepth: 2
+
+    overview
+    install
+    vscode
+    hotkeys
@@ -0,0 +1,28 @@
+.. _editor_install:
+
+============
+Installation
+============
+
+Works on Windows, Linux, MacOS and VSCode (Link the guides).
+
+
+Windows
+*******
+
+Instructions
+
+Troubleshooting
+---------------
+
+Linux
+*****
+
+Troubleshooting
+---------------
+
+MacOS
+*****
+
+Troubleshooting
+---------------
@@ -0,0 +1,63 @@
+.. _editor_overview:
+
+========
+Overview
+========
+
+TODO: describe the purpose and advantages, it's related to XML, has tools (CLI, online share, figma), 3-4 paragraph
+
+Getting started
+***************
+
+TODO Work on Windows, Linux, MacOS and VSCode. Link the guides.
+
+Login and Licences (trial, buy licence on pro.lvgl.io, read more on the licences page)
+
+Check out the examples (Learn by examples page)
+or learn more about XML
+
+User Interface
+**************
+
+Screen shot, briefly describe the main parts
+
+XML Editor
+----------
+
+Autocomplete, validation
+
+Inspector
+---------
+
+- What is it? (show the rendered content, the user click on it to try out)
+- How to use?  (Press Ctrl or turn on by the button)
+
+  - visualise bounding box, padding, maring and click area
+  - chege size and position by dragging
+  - measurement
+  - double click jumps to the XML file
+  - single click focuses the matching XML
+
+20 sec video to show all these
+
+
+How does it work?
+*****************
+
+- LVGL has a built-in XML parser that can create UIs at runtime
+- the inspector uses LVGL as it is
+- the editor sends the XML files to LVGL
+- the editor ask LVGL to create an instance of the opened XML file
+- when the xml changes only the opened XML file is uploaded, the screen is cleared, and a new instance is created
+- the XML editor parses the XML files of the LVGL widgets and the user's XML files to validate the XMLs
+- code is also exported by parsing the XML files
+
+Project
+*******
+
+- What is a project?
+- What can you describe in project.xml?
+- How does nested projects work?
+
+
+
@@ -0,0 +1,19 @@
+.. _editor_vscode:
+
+================
+VSCode extension
+================
+
+
+Overview
+*********
+
+General overview
+
+Works on Windows, Linux, MacOS too (Link the guides).
+
+Usage
+*****
+
+Troubleshooting
+***************
@@ -1,16 +1,21 @@
-.. _xml_main:
+.. _editor_and_xml:

-====================
-XML - Declarative UI
-====================
+=================
+UI Editor and XML
+=================


 .. toctree::
    :class:    toctree-1-deep
    :maxdepth: 2

-    overview/index
+    intro
+    learn_by_examples
+    editor/index
+    xml/index
+    integration/index
    ui_elements/index
    assets/index
    features/index
-    license
+    tools/index
+    license/index
@@ -0,0 +1,7 @@
+.. _editor_integration_c:
+
+=======================
+Use the exported C code
+=======================
+
+
@@ -0,0 +1,13 @@
+.. _editor_integration:
+
+===========
+Integration
+===========
+
+.. toctree::
+    :class:    toctree-1-deep
+    :maxdepth: 2
+
+    overview
+    c_code
+    xml
@@ -0,0 +1,7 @@
+.. _editor_integration_overview:
+
+========
+Overview
+========
+
+
@@ -0,0 +1,7 @@
+.. _editor_integration_xml:
+
+====================
+Load XMLs at runtime
+====================
+
+
@@ -0,0 +1,8 @@
+.. _xml_intro:
+
+============
+Introduction
+============
+
+3-4 paragraph about what is the Editor and XML, for what it can be used, why is it good,
+tools, etc. All with link. No subsections.
@@ -0,0 +1,11 @@
+.. _editor_learn_by_examples:
+
+=================
+Learn by Examples
+=================
+
+TODO
+
+Add 1 paragraph of description for each folder in lvgl/examples/xml
+and button to open them in the online preview
+
@@ -0,0 +1,7 @@
+.. _editor_license:
+
+==============
+Editor license
+==============
+
+TODO: describe the pricing models and conditions
@@ -0,0 +1,13 @@
+.. _xml_editor_licences:
+
+========
+Licenses
+========
+
+
+.. toctree::
+    :class:    toctree-1-deep
+    :maxdepth: 1
+
+    xml
+    editor
@@ -1,8 +1,8 @@
 .. _lvgl_xml_license:

-=======
-License
-=======
+===========
+XML License
+===========

 **Version 1.0 – June 2025**

@@ -0,0 +1,23 @@
+
+.. _editor_cli:
+
+===
+CLI
+===
+
+Overview
+********
+
+Usage
+*****
+
+Arguments
+---------
+
+Using locally
+-------------
+
+Using in CI/CD
+--------------
+
+
@@ -0,0 +1,24 @@
+
+.. _editor_figma:
+
+=================
+Figma integration
+=================
+
+Overview
+********
+
+Usage
+*****
+
+
+LVGL Figma plugin
+-----------------
+
+Connect Figma to the Editor
+---------------------------
+
+
+Sync data
+---------
+
@@ -0,0 +1,14 @@
+.. _xml_tool:
+
+=====
+Tools
+=====
+
+
+.. toctree::
+    :class:    toctree-1-deep
+    :maxdepth: 2
+
+    cli
+    online_share
+    figma
@@ -0,0 +1,12 @@
+
+.. _editor_online_share:
+
+============
+Online Share
+============
+
+Overview
+********
+
+Usage
+*****
@@ -1,13 +1,13 @@
-.. _xml_overview:
+.. _xml_main:
+
+============
+XML Overview
+============

-========
-Overview
-========

 .. toctree::
    :class:    toctree-1-deep
    :maxdepth: 2

-    intro
+    overview
    syntax
-
@@ -1,8 +1,9 @@
-.. _xml_intro:
+.. _xml_overview:
+
+========
+Overview
+========

-============
-Introduction
-============

 .. |nbsp|   unicode:: U+000A0 .. NO-BREAK SPACE
    :trim: