Doc: Add Qt Design Studio Manual sources

To build the manual, switch to qtcreator\doc\qtdesignstudiodoc,
run qmake, and then "make docs".

The example documentation does not get built with this change.
We need to decide whether to move the examples or fetch their
docs from the other repository.

Task-number: QDS-1487
Change-Id: Ic0a8c15b226eba8ac90686953568f3deaa000fb0
Reviewed-by: Eike Ziller <eike.ziller@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

51 files changed, 6120 insertions, 0 deletions

diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc
new file mode 100644
index 0000000000..60a521726e
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc
@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage studio-getting-started.html
+    \page qtbridge-overview.html
+    \nextpage psqtbridge.html
+
+    \title Exporting Artwork from Design Tools
+
+    You need to use \QB for exporting the 2D assets from design tools,
+    whereas you can directly import 3D assets saved in widely-used 3D
+    graphics formats. For best results when importing 3D assets, follow
+    the guidelines for creating and exporting them.
+
+    \list
+
+        \li \l{Exporting Designs from Adobe Photoshop}
+
+            You can use the \QBPS export tool in Adobe Photoshop to convert
+            artwork into Qt Quick files (.ui.qml) that you can import to
+            projects in \QDS.
+
+        \li \l{Exporting Designs from Sketch}
+
+            You can use the \QBSK export tool in Sketch to convert artwork into
+            Qt Quick files that you can import to projects in \QDS.
+
+        \li \l{Exporting from Maya}
+
+            You can export 3D graphics from Maya in the FBX format.
+            The necessary plugin is usually enabled by default.
+
+        \omit
+        \li \l{Exporting 3D Assets}
+
+            You can import files you created using 3D graphics applications and
+            stored in several widely-used formats, such as .blend, .dae, .fbx,
+            .glb, .gltf, .obj, .uia, or .uip.
+        \endomit
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc
new file mode 100644
index 0000000000..272a045421
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+// Note: The \page value is hard-coded as a link in Qt Bridge for Adobe Photoshop.
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage qtbridge-overview.html
+    \page psqtbridge.html
+    \nextpage qtbridge-ps-setup.html
+
+    \title Exporting Designs from Adobe Photoshop
+
+    You can use \QBPS to export designs from Adobe Photoshop to .ui.qml files.
+
+    \image studio-ps-export.png
+
+    If you would rather use Adobe Illustrator for creating artwork, you can
+    copy-paste your assets to Adobe Photoshop as \e {smart objects}.
+
+    The following topics describe setting up and using \QBPS:
+
+    \list
+
+        \li \l{Setting Up Qt Bridge for Adobe Photoshop}
+
+            You must install and set up the \QBPS export tool before you can use
+            it to convert artwork into Qt Quick files that you can import to
+            projects in \QDS.
+
+        \li \l{Using Qt Bridge for Adobe Photoshop}
+
+            To get the best results when you use \QBPS to export designs from
+            Photoshop to Qt Quick files, you should follow the guidelines for
+            working with Photoshop and organizing your assets.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc
new file mode 100644
index 0000000000..0268fd04af
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc
@@ -0,0 +1,116 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Bridge documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+
+    \contentspage {Qt Design Studio}
+    \previouspage psqtbridge.html
+    \page qtbridge-ps-setup.html
+    \nextpage qtbridge-ps-using.html
+
+    \title Setting Up \QBPS
+
+    \QBPS is delivered as an Adobe extension (ZXP) package and requires Adobe
+    Photoshop version 20.0.0, or later to be installed. The \QBPS installation
+    process differs depending on whether you use ZXPInstaller and whether you
+    are installing on Windows or \macos.
+
+    \section1 Installing with ZXPInstaller
+
+    To use ZXPInstaller to install \QBPS:
+
+    \list 1
+        \li Download and install \l{http://zxpinstaller.com/}{ZXPInstaller}.
+        \li Start ZXPInstaller.
+        \li Drag and drop the \QBPS ZXP package from the \c photoshop_bridge
+            directory in the installation directory of \QDS to ZXPInstaller.
+        \li Follow the instructions of the installation program.
+    \endlist
+
+    \section1 Installing Without ZXPInstaller
+
+    The \QBPS installation process differs depending on the platform you
+    are installing on.
+
+    \section2 Installing on Windows
+
+    To install \QBPS on Windows without using ZXPInstaller:
+
+    \list 1
+        \li Copy the \QBPS ZXP package from the \c photoshop_bridge directory
+            in the installation directory of \QDS to the \c Documents directory
+            in your user directory.
+        \li Open Windows PowerShell.
+        \li Enter the following commands:
+        \badcode
+            cd "$env:UserProfile\Documents"
+            mv .\io.qt.QtBridge.zxp .\io.qt.QtBridge.zip
+            expand-archive .\io.qt.QtBridge.zip
+            xcopy /E /I .\io.qt.QtBridge  "$env:APPDATA\Adobe\CEP\extensions\io.qt.QtBridge"
+        \endcode
+    \endlist
+
+    \section2 Installing on \macos
+
+    To install \QBPS on \macos without using ZXPInstaller:
+
+    \list 1
+        \li Copy the \QBPS ZXP package from the \c photoshop_bridge
+            directory in the installation directory of \QDS to your
+            \c Documents directory.
+        \li Open Terminal.
+        \li Enter the following commands:
+        \badcode
+            cd ~/Documents
+            unzip io.qt.QtBridge.zxp -d io.qt.QtBridge
+            sudo mkdir -p /Library/Application\ Support/Adobe/CEP/extensions
+            sudo cp -R ./io.qt.QtBridge /Library/Application\ Support/Adobe/CEP/extensions
+        \endcode
+    \endlist
+
+    \section1 Enabling Remote Connections
+
+    To set up \QBPS:
+
+    \list 1
+        \li Once the installation is completed, restart Adobe Photoshop to make
+            \QBPS appear in \uicontrol Window > \uicontrol Extensions.
+        \li Select \uicontrol Edit > \uicontrol Preferences >
+            \uicontrol General > \uicontrol Plug-ins to enable a remote
+            connection.
+        \li Select the \uicontrol {Enable Remote Connections} check box and
+            enter a password in the \uicontrol Password field.
+        \li To test that the connection is working properly, start \QBPS and
+            select the settings icon in the top right corner.
+            \image qt-bridge-settings.png
+        \li In the \uicontrol Password field, enter the password you entered in
+            Adobe Photoshop and select \uicontrol {Connect}.
+        \li In the \uicontrol {Export Path} group, select the browse button
+            (\uicontrol {...}) to specify the location where \QBPS copies the
+            exported files.
+    \endlist
+
+    Once the connection is successfully created, \QBPS is ready to use.
+*/
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
new file mode 100644
index 0000000000..754a73f635
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
@@ -0,0 +1,258 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Bridge documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage qtbridge-ps-setup.html
+    \page qtbridge-ps-using.html
+    \nextpage sketchqtbridge.html
+
+    \title Using \QBPS
+
+    \section1 Organizing Assets
+
+    To get the best results when you use \QBPS to export designs from Adobe
+    Photoshop to \QDS, follow these guidelines when working with Photoshop:
+
+    \list
+        \li Arrange your art into artboards and organize it into groups and
+            layers that are imported into \QDS as separate files, depending
+            on the choices you make when exporting designs.
+        \li Use the Type tool to make sure that all of your text labels
+            are exported to \l Text items.
+        \li Store all assets in vector format to be able to easily rescale them
+            for different screen sizes and resolutions.
+    \endlist
+
+    If you would rather use Adobe Illustrator for creating artwork, you can
+    copy-paste your assets to Adobe Photoshop as \e {smart objects}. You can
+    then double-click the smart objects in Photoshop to open them in Illustrator
+    for editing. Because you use smart objects, all your changes are propagated
+    to all instances of the objects used in your designs in Photoshop.
+
+    To use the fonts that you use in Photoshop also in \QDS, you need to load
+    them to \QDS. \QDS deploys them to devices when you preview the UI. For more
+    information, see \l{Using Custom Fonts}.
+
+    \section2 Using Artboards
+
+    The relationships between the groups and layers on an artboard are preserved
+    when you export designs from Adobe Photoshop and import them into \QDS.
+
+    When you use \QBPS to export your designs, you will determine how you want
+    each group or layer exported: as a \e component or \e child. A component is
+    a single QML file that can contain other assets. A child is a single PNG
+    file that you can use within QML files.
+
+    If you plan to use pieces of your artwork as separate images in the UI,
+    group them on an artboard as separate layers. You can then export the group
+    as a component and each layer within it as a child. The children are
+    imported to \QDS as separate PNG files that you can use as image sources.
+
+    To use the contents of an artboard as a single image in the UI, you can
+    merge the groups and layers when you export them. During import, the
+    contents are flattened into one PNG file. The merge is done in a way that
+    enables you to change the groups and layers in Photoshop or Adobe
+    Illustrator and then export and import the artboard again. This is an easy
+    way to create a reference image of how the final UI should look like, for
+    example.
+
+    Place different parts of the UI, such as menus and pop-ups, on separate
+    artboards to be able to export them as components or children and to
+    import them as QML and PNG files that you can drag and drop to the working
+    area in \QDS Design mode while creating a UI.
+
+    \QDS offers predefined sets of UI controls that you can modify according
+    to your needs. You can export your own controls as QML types, Qt Quick
+    Controls, or Studio Components. The position and dimensions of your control
+    are preserved.
+
+    However, if you want your UI controls, such as check boxes, to look exactly
+    like they do in Photoshop, you have to create the control in an Artboard and
+    use the artboard in the layers where the control instance is to be created.
+    \QB exports the control as a custom QML component that you can program in
+    \QDS.
+
+    \section1 Exporting Assets
+
+    Each artboard is exported automatically as a component. That is, a separate
+    QML file that contains all the artwork on the artboard, except layers that
+    are set to be skipped or exported as child items. You determine how
+    each group or layer in an artboard is exported: as a component or a child
+    item. In addition, you can merge the groups and layers of an artboard
+    into the parent as one item or skip layers completely.
+
+    By default, layers are exported as follows:
+
+    \list
+        \li First level group layers are exported as child items of the
+            artboard.
+        \li Second level group layers are merged to their parent.
+        \li Asset layers are exported as merged.
+        \li Text layers are always exported as child items.
+    \endlist
+
+    \QBPS automatically proposes identifiers (QML ids) for all groups and layers.
+    The ids will be used as filenames in \QDS. You can change the ids, so that
+    you can easily find them in \QDS. Just keep in mind that the ids must be
+    unique and that they must follow some naming conventions.
+
+    You can export assets using the default settings and make all the changes
+    later in \QDS. If you are familiar with the \l{QML Syntax Basics}
+    {QML syntax}, you can modify the settings to tailor the generated QML to
+    a certain degree. For example, you can specify the QML type or Studio
+    component to use for a component or layer. If you have drawn an arc that
+    you mean to animate, you can export it as an Arc Studio component to avoid
+    having to replace the arc image with an Arc component in \QDS. Or you could
+    export a button as a Qt Quick Controls 2 Button type.
+
+    You can specify effects, such as a blur effect, to use for a group or layer.
+
+    The QML types supported by \QDS are listed in the \uicontrol {QML Types}
+    tab in the \uicontrol Library in the Design mode of \QDS. For more
+    information, see \l{Creating Components}.
+
+    You can also specify values for the properties of the QML type or create
+    \l{Property Aliases}{property aliases} to fetch the values from other
+    properties.
+
+    \image qt-bridge.png
+
+    \section2 Specifying Settings for Exporting Assets
+
+    To export your design using \QBPS:
+
+    \list 1
+        \li \QBPS automatically proposes identifiers for all groups and layers
+            that you can change in the \uicontrol {QML ID} field. The ids must
+            be unique, they must begin with a lower-case letter or an
+            underscore, and they can only contain letters, numbers, and
+            underscore characters. For more information, see
+            \l {The id Attribute}.
+        \li In the \uicontrol {Export As} field, select the export type for the
+            group or layer:
+            \list
+                \li \uicontrol Component creates a separate QML file for the
+                    selected artboard, group, or layer that contains all the
+                    artwork in it, except layers that are set to be skipped or
+                    exported as child items.
+                \li \uicontrol Child creates a separate PNG file for each asset
+                    of the selected group or layer, with references to the
+                    images in the component file.
+                \li \uicontrol Merged merges the selected groups and layers into
+                    the parent as one item.
+                \li \uicontrol Skipped completely skips the selected layer.
+            \endlist
+        \li In the \uicontrol {As Artboard} field, select an artboard
+            to reuse. For example, you can use an artboard to define a
+            component, such as a button, and reuse it in other artboards.
+        \li In the \uicontrol {QML Type} field, specify the QML type
+            or Studio component to morph this layer into. The generated
+            component will be of this type. For example, if you drew a
+            rectangle, you can export it as a Rectangle Studio component.
+            You can provide the import statement of the module where the QML
+            type is defined in the \uicontrol {Add Imports} field.
+        \li In the \uicontrol {Add Imports} field, enter additional
+            import statements to have them added to the generated QML file.
+            For example, to use Qt Quick Controls 2.3, you need the import
+            statement \c {QtQuick.Controls 2.3} and to use Qt Studio
+            Components 1.0, you need the import statement
+            \c {QtQuick.Studio.Components 1.0}. You can also import a module
+            as an alias.
+        \li In the \uicontrol {QML Properties} field, specify properties for
+            the QML type. You can add and modify properties in \QDS.
+        \li Select the \uicontrol {Clip Contents} check box to enable clipping
+            in the type generated from the layer. The generated type will clip
+            its own painting, as well as the painting of its children, to its
+            bounding rectangle.
+        \li Select the \uicontrol {Create Alias} check box to export the item
+            generated from this layer as an alias in the parent component.
+        \li Select \uicontrol {Cascade properties} to apply the current set of
+            properties to all the children of the selected layer.
+        \li Select \uicontrol Export to copy your assets to the export path you
+            specified.
+        \li When the exporting is done, select \uicontrol OK.
+    \endlist
+
+    All the assets and metadata are copied to the directory you specified. This
+    might take a little while depending on the complexity of your project.
+
+    You can now create a project in \QDS and import the assets to it, as
+    described in \l {Creating Projects} and \l{Importing Designs}.
+
+    \section1 Sanitizing Documents
+
+    \QBPS enables removing all \QBPS related metadata from the active
+    document. In the \QBPS \uicontrol Settings dialog, select
+    \uicontrol {Sanitize Document} to sanitize the active document.
+    Once the sanitization is successfully done, the document will
+    contain no \QBPS related metadata and the \QBPS layer settings will fall
+    back to the \l{Exporting Assets}{default} values.
+
+    \note The sanitization is done in memory and the document must be saved to
+    keep the sanitized state.
+
+    \image qt-bridge-sanitize.png
+
+    \section1 Extending \QBPS
+    You can change the default behavior of \QBPS with the help of a JSX script. One can write
+    specific functions in the script that are called by \QBPS with useful parameters.
+
+    \section2 Overridable JSX Functions
+    You can define the following functions in the override JSX.
+    \list
+        \li preExport(document)
+            This function is called before the document is exported. The parameter \a document is
+            the PSD Document instance. This function can be used to make temporary changes in
+            the document before export.
+        \li postExport(document)
+            This function is called after the document is exported. The parameter \a document is the
+            PSD Document instance. You can undo the temporary changes done in the function
+            \e preExport(...).
+        \li customDefaultQmlId(name, instance)
+            The function is called for settings the default QML id of the layer. The returned value
+            is used for the QML id. Return \e Falsey to use the auto generated QML id instead.
+            The parameter \a name is the auto generated QML id by the plugin and \a instance is the
+            PSD layer instance.
+    \endlist
+
+    \note Please refer to \l {https://www.adobe.com/devnet/photoshop/scripting.html}
+    {Adobe Photoshop CC Javascript} scripting guide to understand the object model and \e Document
+    and \e Layer instances.
+
+    \image qt-bridge-override.png
+
+    In the \QBPS \uicontrol Settings dialog, select \uicontrol {Override JSX Script} to set the
+    override JSX script.
+
+    For more information, watch a video tutorial and webinar about using \QBPS:
+
+    \list
+        \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone}
+            {Building an Instrument Cluster for Your Car HMI, Part 1}
+        \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44}
+            {From Photoshop to Prototype with Qt Design Studio}
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc
new file mode 100644
index 0000000000..dbb986aa61
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+// Note: The \page value is hard-coded as a link in Qt Bridge for Sketch.
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage qtbridge-ps-using.html
+    \page sketchqtbridge.html
+    \nextpage qtbridge-sketch-setup.html
+
+    \title Exporting Designs from Sketch
+
+    You can use \QBSK to export designs from Sketch to .ui.qml files.
+
+    \image studio-sketch-export.png
+
+    The following topics describe setting up and using \QBSK:
+
+    \list
+
+        \li \l{Setting Up Qt Bridge for Sketch}
+
+            You must install Sketch and the \QBSK export tool before you can use
+            the tool to convert artwork into Qt Quick files that you can import
+            to projects in \QDS.
+
+        \li \l{Using Qt Bridge for Sketch}
+
+            To get the best results when you use \QBSK to export designs from
+            Sketch to Qt Quick files, you should follow the guidelines for
+            working with Sketch and organizing your assets.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc
new file mode 100644
index 0000000000..4c761b90d0
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-setup.qdoc
@@ -0,0 +1,44 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Bridge documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+
+    \contentspage {Qt Design Studio}
+    \previouspage sketchqtbridge.html
+    \page qtbridge-sketch-setup.html
+    \nextpage qtbridge-sketch-using.html
+
+    \title Setting Up \QBSK
+
+    \QBSK is delivered with \QDS as a Sketch plugin that you can install to
+    Sketch.
+
+    \note Install the Sketch app before installing the plugin.
+
+    To install the \QBSK plugin to Sketch, double-click the \QBSK plugin in the
+    \c sketch_bridge directory in the installation directory of \QDS.
+
+    The plugin is available at \uicontrol Plugins > \uicontrol {\QB}.
+*/
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
new file mode 100644
index 0000000000..c10d4c18ae
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
@@ -0,0 +1,196 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Bridge documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage qtbridge-sketch-setup.html
+    \page qtbridge-sketch-using.html
+    \nextpage exporting-from-maya.html
+
+    \title Using \QBSK
+
+    \section1 Organizing Assets
+
+    To get the best results when you use \QBSK to export designs from Sketch
+    to \QDS, follow these guidelines when working with Sketch:
+
+    \list
+        \li Arrange your sketch document in artboards, layers, and groups. The
+            QML code generated in \QDS corresponds to the structure of your
+            Sketch document.
+        \li \QBSK supports document \e symbols and \e {symbol overrides}. Each
+            symbol is exported as a QML component, and each symbol instance is
+            generated as a respective \e component instance in the generated
+            QML. The symbol overrides are exported as values of properties for
+            the components. For example, if you use symbol overrides to specify
+            the text for each button instance, it is exported as a value of the
+            text property.
+        \li Store all assets in the scalable vector graphics (SVG) format
+            to be able to easily rescale them for different screen sizes
+            and resolutions.
+    \endlist
+
+    To use the fonts that you use in Sketch also in \QDS, you need to load
+    them to \QDS. \QDS deploys them to devices when you preview the UI. For more
+    information, see \l{Using Custom Fonts}.
+
+    \section2 Using Artboards
+
+    The relationships between artboards and layers are preserved when you export
+    designs from Sketch and import them into \QDS.
+
+    An artboard can only be exported as a component. That is, a separate
+    QML file that contains all the artwork on the artboard, except layers that
+    are set to be skipped or exported as child items.
+
+    A component is a single QML file that can contain other child items with
+    assets or text.
+
+    To use the contents of an artboard as a single image in the UI, you can
+    merge the groups and layers when you export them. During import, the
+    contents are flattened into one PNG file. The merge is done in a way that
+    enables you to change the groups and layers in Sketch and then export and
+    import the artboard again. This is an easy way to create a reference image
+    of how the final UI should look like, for example.
+
+    Place different parts of the UI, such as menus and pop-ups, on separate
+    artboards to be able to export them as components or children and to
+    import them as QML and PNG files that you can drag and drop to the working
+    area in \QDS Design mode while creating a UI.
+
+    \section2 Using Layer and Groups
+
+    When you use \QBSK to export your designs, you will determine how you want
+    each layer or group to be exported: as \e merged or as \e child. Each
+    layer or group represents a separate image in the UI when it is exported as
+    a \e child. The asset of the layer or group is merged to its parent
+    group or artboard if it is exported as \e merged.
+
+    You can select the asset format and DPI to use for each image in
+    \uicontrol Settings > \uicontrol {Asset Settings}.
+
+    \section1 Exporting Assets
+
+    By default, layers are exported as follows:
+
+    \list
+        \li Artboards are always exported as \e components or \e skipped.
+        \li Asset layers are exported as merged.
+        \li Text layers can only be exported as \e child or \e skipped.
+        \li A \e hotspot layer can only be exported as \e child or \e skipped.
+            It is always exported as an instance of the \l MouseArea QML type.
+        \li A symbol instance layer can only be exported as \e child or
+            \e skipped.
+    \endlist
+
+    You can export assets using the default settings and make all the changes
+    later in \QDS. If you are familiar with the \l{QML Syntax Basics}
+    {QML syntax}, you can modify the settings to tailor the generated QML to
+    a certain degree. For example, you can specify the QML type or
+    \l {Studio Components}{Qt Quick Studio Component} to use for a component or
+    layer. If you have drawn an arc that you mean to animate, you can export it
+    as an \l Arc component to avoid having to replace the arc image with an Arc
+    component in \QDS. Or you could export a button as a Qt Quick Controls
+    \l Button type.
+
+    \image qt-sketch-bridge.png
+
+    \section2 Specifying Settings for Exporting Assets
+
+    To export your design using \QBSK:
+
+    \list 1
+        \li \QBSK automatically proposes identifiers for all groups and layers
+            that you can change in the \uicontrol {QML ID} field. The ids will
+            be made unique when the layer and the respective artwork is imported
+            into \QDS.
+        \li In the \uicontrol {Export As} field, select the export type for the
+            group or layer:
+            \list
+                \li \uicontrol Component creates a separate QML file for the
+                    selected symbol that contains all the artwork in it, except
+                    layers or groups that are set to be skipped or exported as
+                    child items.
+                \li \uicontrol Child creates a separate PNG file for each asset
+                    of the selected group or layer, with references to the
+                    images in the component file.
+                \li \uicontrol Merged merges the selected groups and layers into
+                    the parent artboard or group as one item.
+                \li \uicontrol Skipped completely skips the selected layer.
+            \endlist
+        \li In the \uicontrol {QML Type} field, specify the QML type or
+            \l {Studio Components}{Qt Quick Studio Component} to morph this
+            layer into. The generated component will be of this type. For
+            example, if you drew a rectangle, you can export it as a
+            \l Rectangle component.
+            You can provide the import statement of the module where the QML
+            type is defined in the \uicontrol Imports field.
+        \li In the \uicontrol Imports field, enter
+            additional import statements to have them added to the generated QML
+            file. For example, to use Qt Quick Controls 2.3, you need the
+            import statement \c {QtQuick.Controls 2.3} and to use Qt Quick
+            Studio Components 1.0, you need the import statement
+            \c {QtQuick.Studio.Components 1.0}. You can also import a module as
+            an alias.
+        \li In the \uicontrol {Properties} field, specify properties for the QML
+             type. You can add and modify properties in \QDS.
+        \li Select the \uicontrol Alias check box to export the item generated
+            from this layer as an alias in the parent component.
+        \li Select the \uicontrol Clip check box to enable
+            clipping in the type generated from the layer. The generated type
+            will clip its own painting, as well as the painting of its children,
+            to its bounding rectangle.
+        \li Select the \uicontrol Visible check box to determine the visibility
+            of the layer.
+        \li Select \uicontrol Export to copy your assets to the export path you
+            specified.
+        \li When the exporting is done, select \uicontrol OK.
+    \endlist
+
+    All the assets and metadata are copied to the directory you specified. This
+    might take a little while depending on the complexity of your project.
+
+    You can now create a project in \QDS and import the assets to it, as
+    described in \l {Creating Projects} and \l{Importing Designs}.
+
+    \section1 Specifying Export Path and Asset Format
+
+    To specify export path and asset format, select \uicontrol Settings >
+    \uicontrol {Asset Settings}.
+
+    \image qt-sketch-bridge-settings.png
+
+    \list 1
+        \li By default, \QBSK exports assets to a directory named after your
+            Sketch file located inside the parent directory of the Sketch file
+            being exported. You can change the export path in the
+            \uicontrol {Export Path} field.
+        \li You can select the default asset format and DPI to use for each
+            layer. These settings are overridden by the layer export settings
+            from the Sketch app. That is, if the layer is made exportable in
+            the Sketch app, the respective asset format and DPI settings are
+            preserved.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc
new file mode 100644
index 0000000000..60891e2aa3
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-adding-dynamics.qdoc
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-adding-dynamics.html
+    \previouspage studio-fonts.html
+    \nextpage studio-timeline.html
+
+    \title Adding Dynamics
+
+    You can animate the properties of UI components and create connections
+    between them to enable them to communicate with each other.
+
+    \list
+        \li \l {Creating Animations}
+
+            You can use a timeline and keyframe based editor in the
+            \uicontrol Timeline view to animate the properties of UI
+            components. Animating properties enables their values to
+            move through intermediate values at specified keyframes
+            instead of immediately changing to the target value.
+         \li \l {Adding Connections}
+
+            You can create connections between the UI components and
+            the application to enable them to communicate with each other. For
+            example, how does the appearance of a button change on a mouse click
+            and which action does the application need to perform in response to
+            it.
+
+            You can also create connections between UI components by
+            binding their properties together. This way, when the value of a
+            property changes in a parent component, it can be automatically
+            changed in all the child components, for example.
+        \li \l {Adding States}
+
+            Qt Quick allows you to declare various UI states that describe
+            how component properties change from a base state. Therefore,
+            states can be a useful way of organizing your UI
+            logic. You can associate transitions with items to define
+            how their properties will animate when they change due to a state
+            change.
+        \li \l {Editing PathView Properties}
+
+            You can use a graphical spline editor to specify \l{PathView} paths.
+            A path view lays out data provided by data models on a \l{Path}.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc
new file mode 100644
index 0000000000..b10c89527c
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc
@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage qt-design-viewer.html
+    \page studio-advanced.html
+    \nextpage studio-platforms.html
+
+    \title Advanced Topics
+
+    \QDS attempts to meet your needs, whether you have previous experience with
+    QML, and coding or not. When you install \QDS, the default configuration
+    allows you to start designing and previewing UIs with very little effort.
+
+    However, you might want to use the \uicontrol {Text Editor} in the Design
+    mode sometimes to edit your QML files or write some JavaScript to simulate
+    application logic and bring your UI to life. If you use JavaScript, you
+    might also want to debug and profile you UIs to find and fix problems in
+    them.
+
+    You can also use special options to start \QC from the command line and use
+    it mainly from the keyboard.
+
+    \list
+        \li \l{Supported Platforms}
+
+            You can install and run \QC on several operating systems to design
+            UIs for multiple desktop, embedded, and mobile device platforms.
+        \li \l{Keyboard Shortcuts}
+
+            \QDS provides various keyboard shortcuts to speed up your
+            development process. You can change the keyboard shortcuts,
+            as well as import and export keyboard shortcut mapping schemes.
+        \li \l{Coding}
+
+            You can use the code editor in the Design mode
+            \uicontrol {Text Editor} view or in the Edit mode to modify QML
+            code. The code editor understands the QML language as code, not
+            just as plain text. This enables it to provide you with useful
+            features, such as semantic highlighting, checking code syntax,
+            code completion, and refactoring actions.
+        \li \l{Simulating Application Logic}
+
+            You can use JavaScript to simulate application logic to bring your
+            UI to life.
+        \li \l{Debugging and Profiling}
+
+            \QDS comes with a JavaScript debugger. In the Debug mode, you
+            can inspect the state of your UI while debugging.
+
+            The memory and CPU power available on devices are limited and
+            you should use them carefully. The QML Profiler enables you to
+            profile Qt Quick UIs.
+    \endlist
+
+    \section1 Related Topics
+
+    \list
+        \li \l{Using External Tools}
+
+            You can use external tools directly from \QC. lupdate and lrelease,
+            QML preview tools (QML Viewer and QML Scene), the default text
+            editor for your system, and the \c sort tool are preconfigured for
+            use. You can change their default configurations and configure new
+            tools.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
new file mode 100644
index 0000000000..71857f95a7
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+//! [studio components]
+
+    \section1 Studio Components
+
+    A set of ready-made studio components are available for creating differently
+    shaped objects, such as arcs, pies, or triangles, as well as objects with
+    particular abilities, such as being visibly \e flipped between their front
+    and back sides, like a card. The studio components are built on top of
+    \l {Qt Quick Shapes QML Types}, with some additional properties.
+
+    You can drag-and-drop the following studio components from the
+    \uicontrol Library to the canvas or the \uicontrol Navigator:
+
+    \list
+        \li \l Arc adds an arc that begins and ends at given positions.
+        \li \l Border adds a border with corners that you can shape
+            independently of each other.
+        \li \l Flipable provides a surface that can be flipped.
+        \li \l Group provides an item with the size property.
+        \li \l Iso adds a container for an ISO 7000 icon.
+        \li \l Pie adds a pie slice or a pie with a slice missing from it.
+        \li \l Rectangle adds a rectangle with corners that you can shape
+            independently of each other.
+        \li \l SvgPath adds an SVG path.
+        \li \l Triangle adds a triangle.
+    \endlist
+
+//! [studio components]
+
+//! [creating studio components]
+
+    \section1 Creating Custom Controls
+
+    You can use the project wizard to create a starting point for a custom
+    \l [QtQuickControls2] {Button}, \l [QtQuickControls2] {Pane},
+    \l [QtQuickControls2] {StackView}{Stack View}, or
+    \l [QtQuickControls2] {Switch}.
+
+    \list 1
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls}.
+        \li Select the control to create, and then select \uicontrol Choose.
+
+            \note Components are listed in the \uicontrol {QML Components}
+            section of the \uicontrol Library only if the filename begins
+            with a capital letter.
+        \li Edit component properties in the \uicontrol Properties pane.
+
+            The available properties depend on the QML type.
+    \endlist
+
+//! [creating studio components]
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc
new file mode 100644
index 0000000000..98687a88a7
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage studio-javascript.html
+    \page studio-debugging.html
+    \nextpage creator-debugging-qml.html
+
+    \title Debugging and Profiling
+
+    \list
+        \li \l{Debugging Qt Quick Projects}
+
+            You can use the integrated debugger to debug JavaScript functions,
+            to execute JavaScript expressions to get information about the state
+            of the UI, and to inspect QML properties and JavaScript
+            variables and change them temporarily at runtime.
+        \li \l{Debugging a Qt Quick Example Application}
+
+            This section uses the \l{QML Advanced Tutorial}{Same Game} example
+            application to illustrate how to debug Qt Quick applications in the
+            Debug mode.
+        \li \l{Profiling QML Applications}
+
+            You can use the QML Profiler to find causes for typical performance
+            problems in your UIs, such as slowness, freezing, and stuttering.
+            The QML Profiler is installed and configured as part of \QDS.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc
new file mode 100644
index 0000000000..03e119d3c3
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc
@@ -0,0 +1,48 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage studio-help.html
+    \group studioexamples
+    \nextpage creator-help.html
+
+    \title Examples and Tutorials
+
+    In the Welcome mode, you can open examples and tutorials that illustrate
+    how to use \QDS.
+
+    \section1 Video Tutorials
+
+    The \uicontrol Tutorials tab contains links to video tutorials that provide
+    more information about \QDS.
+
+    You can access the Cluster tutorial source files in the \uicontrol Examples
+    tab.
+
+    \section1 Examples
+
+    The \uicontrol Examples tab lists examples about using \QDS.
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc
new file mode 100644
index 0000000000..7667fa5a10
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc
@@ -0,0 +1,40 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage index.html
+    \previouspage creator-help.html
+    \page studio-faq.html
+    \nextpage studio-terms.html
+
+    \title Frequently Asked Questions
+
+    This section contains answers to some frequently asked questions about \QDS.
+    You might also find answers to your questions in the product documentation
+    by searching or browsing the index in the \l{Using the Help Mode}
+    {Help mode}. Many questions are also answered by the
+    \l{Examples and Tutorials}{examples and video tutorials}.
+
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc
new file mode 100644
index 0000000000..1ceef949d7
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-fonts.qdoc
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+
+    \contentspage {Qt Design Studio}
+    \previouspage qtquick-properties.html
+    \page studio-fonts.html
+    \nextpage studio-adding-dynamics.html
+
+    \title Using Custom Fonts
+
+    For your UI to use custom fonts when you preview it on a device,
+    you have to import the fonts to the project folder. \QDS deploys them to
+    the device along with your UI.
+
+    \note Use fixed-width fonts if you plan to animate running numbers, so that
+    they do not appear to jump around the screen when they change.
+
+    To add fonts:
+
+    \list 1
+        \li Select \uicontrol Library > \uicontrol Resources >
+            \uicontrol {Add New Resources}.
+        \li Browse to the folder that contains the font files and select them.
+        \li Enter the name of the directory to save the fonts. By default, \QDS
+            suggests the project directory.
+        \li Select \uicontrol OK to save the fonts.
+    \endlist
+
+    The fonts are added to the list of fonts for the \uicontrol Font property
+    in \uicontrol Properties.
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc
new file mode 100644
index 0000000000..a9b12d1057
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage index.html
+    \page studio-getting-started.html
+    \nextpage qtbridge-overview.html
+
+    \title Getting Started
+
+    Typically, you as a designer would create artwork in imaging and design
+    tools, such as Adobe Photoshop, Sketch, Blender, or Maya, and then send it
+    to a developer for adding it to the application. With the \QB export tool,
+    you can convert 2D assets into \l {Qt Quick} files. You can use the export
+    functionality of 3D graphics tools to save your 3D assets in a format
+    supported by \QDS.  You can import the 2D and 3D assets into \QDS for
+    editing, before you submit the UI to the developer for adding the
+    functionality to the application.
+
+    The following image describes the workflow using \QBPS and \QDS:
+
+    \image studio-workflow.png
+
+    The workflow consists of the following steps:
+
+    \list 1
+        \li Export your artwork from a design tool.
+        \li Create a project in \QDS and import your artwork to it.
+        \li Create reusable components in the Design mode.
+        \li Animate your design with the timeline and easing curve editor.
+        \li Create interactions using states and connections.
+        \li Preview your design in real time, on the desktop or on a mobile
+            or an embedded device.
+    \endlist
+
+    The following topics contain information that you'll need to find your
+    way around \QDS:
+
+    \list
+        \li \l {Exporting Artwork from Design Tools}
+
+            Describes how to export 2D and 3D assets into files that
+            you can import to projects in \QDS.
+        \li \l {User Interface}
+
+            Describes the parts and basic features of \QDS.
+        \li \l{Editing QML Files in Design Mode}
+
+            Describes the parts and basic features of the Design mode.
+        \li \l {Tutorials}
+
+            Describes how to use \QDS to create a simple animated UI with some
+            basic UI components, such as pages, buttons, and fields. Some of
+            the buttons can be used for moving between the pages.
+     \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc
new file mode 100644
index 0000000000..8c983839f2
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-help-overview.qdoc
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage index.html
+    \page studio-help.html
+    \previouspage creator-editor-external.html
+    \nextpage {Examples and Tutorials}
+
+    \title Help
+
+    \list
+        \li \l{Examples and Tutorials}
+
+            A set of examples available in the Welcome mode illustrates how
+            to use \QDS features such as the timeline. If you would rather
+            be shown things than read about them, you can watch our extensive
+            video tutorials.
+
+        \li \l{Using the Help Mode}
+
+            \QDS comes fully integrated with documentation. You can use search
+            and index functions to find particular topics in the helps, or
+            request context-sensitive help by pressing \key F1 in the Design
+            mode.
+
+        \li \l{Frequently Asked Questions}
+
+            Contains answers to some frequently asked questions about \QDS.
+
+        \li \l{Concepts and Terms}
+
+            Describes main \QDS concepts and terms.
+
+    \endlist
+
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc
new file mode 100644
index 0000000000..ee7f2250f9
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-importing-designs.qdoc
@@ -0,0 +1,177 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Bridge documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage creator-vcs-git.html
+    \page studio-importing-designs.html
+    \nextpage studio-importing-2d.html
+
+    \title Importing Designs
+
+    You can import 2D and 3D assets to \QDS projects. You need to use \QB for
+    exporting the 2D assets from design tools, whereas you can directly import
+    3D assets saved in widely-used 3D graphics formats.
+
+    \list
+        \li \l{Importing 2D Assets}
+
+            You can import 2D assets that you exported with \QB to a \QDS
+            project as image and QML files and edit them in the Design mode.
+        \li \l{Importing 3D Assets}
+
+            You can import 3D assets that you created using 3D graphics
+            applications and stored in one of the supported file formats.
+            You can then edit them in the Design mode.
+    \endlist
+*/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage studio-importing-designs.html
+    \page studio-importing-2d.html
+    \nextpage studio-importing-3d.html
+
+    \title Importing 2D Assets
+
+    \image studio-imported-assets.png "Artwork imported into Qt Design Studio"
+
+    You can import assets that you exported with \QB to a \QDS project as image
+    and QML files and edit them in the Design mode. If you make changes to your
+    design in the design tool, you can merge the changes into existing QML files
+    without overwriting the changes you have made in \QDS.
+
+    \note Attempting to import assets exported on another system might fail.
+
+    The following instructions use an empty project as an example. For more
+    information about the options you have, see
+    \l {Creating Projects}.
+
+    To import designs to \QDS projects:
+
+    \list 1
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol General > \uicontrol Choose, and follow the
+            instructions of the wizard to create an empty project.
+        \li In \uicontrol Projects, double-click \e Screen01.ui.qml to move to
+            the Design mode.
+        \li Select \uicontrol Library > \uicontrol Resources >
+            \uicontrol {Add New Resources}.
+        \li Select the folder where you exported the assets.
+        \li Select \uicontrol {Exported Assets (*.metadata)} in the dropdown
+            menu to filter \e .metadata files.
+        \li Select a \e .metadata file to import, and then select
+            \uicontrol Open.
+        \li Select \uicontrol Details next to the
+            \uicontrol {Metadata Import Paths} field to display the path where
+            the metadata is imported from.
+            \image studio-import-metadata.png "Asset Import dialog"
+        \li Select \uicontrol Details next to the
+            \uicontrol {QML/Asset Export Paths} field to display the paths to
+            copy the assets to.
+        \li In the \uicontrol QML field, you can change the folder to copy the
+            QML files to.
+        \li In the \uicontrol Assets field, you can change the folder to copy
+            the image files to.
+        \li Deselect the \uicontrol {Import assets} check box if you only want
+            to create QML files.
+        \li Deselect the \uicontrol {Generate QML} check box if you only
+            want to import assets.
+        \li Select the \uicontrol {Merge QML} check box if you have imported the
+            assets before and want to merge the changes into existing QML files
+            instead of overwriting the existing files.
+        \li Select \uicontrol Import to import the QML files and assets. This
+            might take a little while for complex projects.
+    \endlist
+
+    The imported assets are displayed in the \uicontrol Resources tab in the
+    \uicontrol Library as PNG images. The components that you specified in
+    the design tool are displayed in the \uicontrol {My QML Components} tab,
+    as well as in the \uicontrol Project tab of the \uicontrol Navigator as
+    separate QML files.
+
+    \note The layer that was the bottom layer in the design tool becames the top
+    layer in the \uicontrol Navigator to reflect the QML code model. You
+    can view the QML code in the \uicontrol {Text Editor} tab.
+
+    If asset importer conflicts, warnings, and errors are displayed in the
+    \uicontrol {Asset Import} dialog while importing, fix the issues in
+    design tool and export the assets again.
+
+    \section1 \QB Videos
+
+    For more information about importing assets from Adobe Photoshop, watch a
+    video tutorial and webinar about using \QB:
+
+    \list
+        \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone}
+            {Building an Instrument Cluster for Your Car HMI, Part 1}
+        \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44}
+            {From Photoshop to Prototype with Qt Design Studio}
+    \endlist
+*/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage studio-importing-2d.html
+    \page studio-importing-3d.html
+    \nextpage quick-converting-ui-projects.html
+
+    \title Importing 3D Assets
+
+    You can import files you created using 3D graphics applications and stored
+    in several widely-used formats, such as .blend, .dae, .fbx, .glb, .gltf,
+    .obj, .uia, or .uip. For a list of formats supported by each \l{Qt Quick 3D}
+    version, see the module documentation.
+
+    For more information about exporting 3D graphics from Maya, see
+    \l{Exporting from Maya}.
+
+    During the import, you can optimize the files for \QDS. You can remove
+    components from meshes to reduce the cache size, find and fix issues in
+    the files, optimize graphs and meshes, and so on. The available options
+    depend on whether you are importing files that you created with Qt 3D Studio
+    or with other 3D graphics tools. See the tooltips in the options dialog
+    for more information about a particular option.
+
+    \image studio-import-3d.png
+
+    To import 3D assets to \QDS projects:
+
+    \list 1
+        \li In the Design mode, select \uicontrol Library > \uicontrol Resources
+            > \uicontrol {Add New Resources}.
+        \li Select \uicontrol {3D Assets} in the dropdown menu to filter 3D
+            graphics files.
+        \li Select a file to import, and then select \uicontrol Open.
+        \li In the \uicontrol {3D Scene Options} tab, select options for
+            importing the file.
+        \li Select \uicontrol Import to import the 3D graphics file.
+        \li When the import is done, select \uicontrol Close.
+    \endlist
+
+    You can open the imported files in the Design mode for editing in the
+    \l{Editing 3D Scenes}{3D editor}.
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc
new file mode 100644
index 0000000000..a0e5926adb
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc
@@ -0,0 +1,152 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage creator-editor-options-text.html
+    \page studio-javascript.html
+    \nextpage studio-debugging.html
+
+    \title Simulating Application Logic
+
+    You can use JavaScript to simulate application logic that brings your UI to
+    life.
+
+    You will need the following files:
+
+    \list
+        \li Qt Quick file that will specify the API of the UI
+        \li JavaScript file that generates mock data for the UI.
+            For more information about using JavaScript, see
+            \l{Integrating QML and JavaScript}.
+        \li Module definition file (\e qmldir) that declares the QML type
+            you specify in the Qt Quick file. For more information, see
+            \l {Module Definition qmldir Files}.
+    \endlist
+
+    Here, you will need to write some C++ code. Namely, the Qt Quick file will
+    contain a QObject-derived class that is registered with the QML type system
+    as a \e singleton type. This enables the use of global property values in
+    the UI.
+
+    You can find a video tutorial about creating JavaScript for generating mock
+    data for a UI
+    \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partfour}
+    {here}.
+
+    To create the necessary files:
+
+    \list 1
+        \li In the File Explorer, create a folder for the JavaScript files
+            (for example, \e backend) and another one for the mock data
+            (for example, \e Data) in your project folder.
+            \note Make sure to capitalize the data folder name, because you
+            will need to import it as a QML type later, and QML type names must
+            be capitalized.
+        \li In \QDS, open the project file (.qmlproject) to add the backend
+            folder to the list of plugin directories passed to the QML runtime:
+            \code
+            importPaths: [ "imports", "backend" ]
+            \endcode
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol {Files and Classes} > \uicontrol {Qt Quick Files} >
+            \uicontrol {Qt Quick File} > \uicontrol Choose to add a Qt
+            Quick file that will specify the API of the UI.
+        \li Follow the instructions of the wizard to create the Qt Quick file
+            in the data folder. In these instructions, the file is called
+            \e Values.qml.
+            \note Make sure to capitalize the filename, because it will become
+            a custom QML type.
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol {Files and Classes} > \uicontrol {JavaScript} >
+            \uicontrol {JavaScript File} > \uicontrol Choose to create a
+            JavaScript file that generates mock data for the UI.
+        \li Follow the instructions of the wizard to create the JavaScript file
+            in the data folder. In these instructions, the file is called
+            \e {simulation.js}.
+        \li Delete the template text in JavaScript file and save the file.
+        \li In a text editor such as Notepad, create a module definition file
+            called \e qmldir with the following contents and place it in the
+            data directory:
+            \code
+            singleton Values 1.0 Values.qml
+            \endcode
+        \li Open \e Values.qml in the \uicontrol {Text Editor} tab for editing.
+        \li Add the following code to the top of the file to register the
+            QObject-derived class that you will use to expose the global
+            properties as a singleton type:
+            \code
+            pragma Singleton
+            \endcode
+        \li Add the following import statement to import the \e {simulation.js}
+            file to use the functionality that it provides:
+            \code
+            #import simulation.js as JS
+            \endcode
+        \li Add the following code to create a QObject-derived class that will
+            list the global properties you want to simulate and their default
+            values:
+            \code
+            QObject {
+                id: values
+
+                // property values to simulate
+                property int name1: default1
+                property string name2: default2
+                property real name3: default3
+
+            }
+            \endcode
+            \note You must export the properties as aliases by selecting
+            \uicontrol {Export Property as Alias} in the
+            \inlineimage icons/action-icon.png
+            (\uicontrol Actions) menu of the property in the
+            \uicontrol Properties view. Exported properties are listed in
+            \uicontrol Connections > \uicontrol Properties, where you can
+            change their names.
+        \li Add the following code to use a \l Timer type to specify a range of
+            values for the property:
+            \code
+            property Timer name1Timer: Timer{
+                running: true
+                repeat: true
+                onTriggered: JS.name1Timer()
+                interval: 10
+            \endcode
+            \note You must add the JavaScript method to the JavaScript file.
+        \li Open the main UI file of the project and add the following code to
+            import the data folder as a QML module:
+            \code
+            #import Data 1.0 as Data
+            \endcode
+        \li Select \uicontrol {Set Binding} in the \uicontrol Settings menu of the
+            property to bind the property value to the value defined in the
+            values file. For example, you would set the following expression for
+            \e name1:
+            \code
+            Data.Values.name1
+            \endcode
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc
new file mode 100644
index 0000000000..2f48bdf68d
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-platforms.qdoc
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage studio-advanced.html
+    \page studio-platforms.html
+    \nextpage creator-keyboard-shortcuts.html
+
+    \title Supported Platforms
+
+    You can install and run \QDS on several operating systems to create
+    applications for multiple desktop, embedded, and mobile device platforms.
+
+    \section1 Development Platforms
+
+    \QDS is available in binary packages for the following operating systems:
+
+    \list
+        \li \macos 10.13 and 10.14.x
+        \li Ubuntu Linux 18.04
+        \li Windows 10
+    \endlist
+
+    \section1 Design Tools
+
+    \QB is available for the following design tools:
+
+    \list
+        \li Adobe Photoshop version 20.0.0
+        \li Sketch 55.1
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc
new file mode 100644
index 0000000000..6f313d6688
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-projects-overview.qdoc
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage {Tutorials}
+    \page studio-projects-managing.html
+    \nextpage studio-projects.html
+
+    \title Managing Projects
+
+    One of the major advantages of \QDS is that it allows a team of designers
+    and developers to share a project across different development platforms
+    with a common tool for design, development, profiling, and debugging.
+
+    \list
+
+        \li \l {Creating Projects}
+
+            You must add your exported files to a new project that you create
+            in \QDS. Setting up a new project in \QDS is aided by a wizard that
+            guides you step-by-step through the project creation process,
+            creates the necessary files, and specifies settings depending
+            on the choices you make.
+
+            You can use wizards to create projects for the desktop or embedded
+            Linux and Android devices. In addition, you can add individual QML
+            files, components, font loaders, and JavaScript files to your
+            projects.
+
+        \li \l{Using Git}
+
+            You can add the project files to the Git version control, so that
+            the developers can keep up with your changes. Store and edit only
+            project source files and configuration files. Do not store generated
+            files.
+
+        \li \l{Importing Designs}
+
+            You can import assets that you exported from Adobe Photoshop to a
+            \QDS project and edit them in the Design mode to create a UI.
+
+        \li \l {Converting UI Projects to Applications}
+
+            \QDS projects are useful for creating UIs. To use them
+            for application development in Qt Creator, you have to convert them
+            to Qt Quick Application projects that contain .pro, .cpp, and .qrc
+            files.
+
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc
new file mode 100644
index 0000000000..570f2c8eb0
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc
@@ -0,0 +1,159 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+
+    \contentspage {Qt Design Studio Manual}
+    \previouspage studio-projects-managing.html
+    \page studio-projects.html
+    \nextpage creator-vcs-git.html
+
+    \title Creating Projects
+
+    Creating a project enables you to:
+
+    \list
+        \li Group files together
+        \li Include forms and resource files
+        \li Specify settings for previewing UIs
+    \endlist
+
+    Setting up a new project in \QDS is aided by a wizard that guides you
+    step-by-step through the project creation process. The wizards prompt you
+    to enter the settings needed for that particular type of project and create
+    the necessary files for you.
+
+    Studio projects are useful for creating UIs. You cannot use
+    them for application development, because they do not contain:
+
+    \list
+        \li C++ code
+        \li Resource files (.qrc)
+        \li Code needed for deploying applications to devices.
+    \endlist
+
+    Because the UIs do not contain any C++ code, you do not need
+    to build them. To test how well your designs work, you can preview the
+    UIs on the desktop or embedded Linux devices. For more
+    information, see \l{Previewing}.
+
+    \image studio-project-wizards.png "A list of project wizards"
+
+    You can export designs from other design tools and import them to projects
+    or create them from scratch using the following wizards:
+
+    \list
+        \li \uicontrol General generates projects that are suitable for all
+            target platforms.
+        \omit
+        \li \uicontrol Embedded generates projects that work well on embedded
+            Linux devices.
+        \endomit
+        \li \uicontrol Mobile generates projects that work well on mobile
+            devices.
+        \li \uicontrol Desktop generates projects that work well on the desktop.
+    \endlist
+
+    \section1 Using Project Wizards
+
+    \list 1
+        \li Select \uicontrol File > \uicontrol {New File or Project}.
+        \li Select the type of your project, and then select \uicontrol Choose.
+        \li In the \uicontrol Name field, enter a name for the project.
+        \li In the \uicontrol {Create in} field, enter the path for the project
+            files, and then select \uicontrol Next (or \uicontrol Continue on
+            \macos).
+        \li In the \uicontrol {Screen resolution} field, select the screen
+            resolution for previewing the UI on the desktop or on a device.
+        \li In the \uicontrol {Qt Quick Controls Style} field, select one of
+            the predefined \l{Styling Qt Quick Controls}{UI styles} to use,
+            and then select \uicontrol Finish (or \uicontrol Done on \macos).
+    \endlist
+
+    \QDS creates the following files and folders:
+
+    \list
+        \li .qmlproject project file defines that all QML, JavaScript, and image
+            files in the project folder belong to the project. Therefore, you do
+            not need to individually list all the files in the project.
+        \li .qml file defines a UI item, such as a component, screen, or the
+            whole UI.
+        \li ui.qml file defines a form for the UI.
+        \li qtquickcontrols2.conf file specifies the preferred style and some
+            style-specific arguments.
+        \li \e imports folder contains a \e {Constants.qml} file that specifies
+            a font loader for the Arial font and a \e qmldir module definition
+            file that declares the Constant QML type. For more information, see
+            \l {Module Definition qmldir Files}. In addition, the \e QtQuick
+            subfolder contains the Studio components and effects QML types.
+    \endlist
+
+    To use JavaScript and image files in the UI, copy them to the
+    project folder.
+
+    \section1 Adding Files to Projects
+
+    You can use wizards also to add individual files to your projects.
+    You can create the following types of files:
+
+    \list
+        \li \uicontrol {Qt Quick Files}
+            \list
+                \li \uicontrol {Qt Quick File} generates a QML type with one
+                    of the following types as the root item: \l Item,
+                    \l Rectangle, \l Image, \l BorderImage, \l Flickable,
+                    \l Row, \l Column, \l Flow, or \li Grid.
+                \li \uicontrol {Qt Quick UI File} generates a UI form with one
+                    of the above types as the root item.
+                \li \uicontrol {Qt Quick Views} generates a \l GridView or a
+                    \l ListView.
+            \endlist
+        \li \uicontrol {Qt Quick Controls}
+            \list
+                \li \l [Qt Quick Controls 2] {Button}{Custom Button} creates a
+                    push button with a text label.
+                \li \l [Qt Quick Controls 2] {Switch}{Custom Switch} creates a
+                    switch with on and off states.
+                \li \l [Qt Quick Controls 2] {Pane} provides a background that
+                    matches the UI style and theme.
+                \li \l [Qt Quick Controls 2] { StackView} provides a stack-based
+                    navigation model.
+                \li \l [Qt Quick Controls 2] {SwipeView} enables users to
+                    navigate pages by swiping sideways.
+            \endlist
+        \li \uicontrol {QML Files}
+            \list
+                \li \l FontLoader imports custom fonts to the project for
+                    deployment to devices. For more information, see
+                    \l {Using Custom Fonts}.
+                \li \l ListModel adds a list model to the project.
+            \endlist
+        \li \uicontrol {JavaScript File} generates files that you can use to
+            write the application logic. This is useful for testing the
+            application before the developers implement the application logic
+            in C++, for example. For more information, see
+            \l {Simulating Application Logic}.
+        \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc
new file mode 100644
index 0000000000..df42f2fca0
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-prototyping.qdoc
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage quick-converting-ui-projects.html
+    \page studio-prototyping.html
+    \nextpage quick-components.html
+
+    \title Creating UIs
+
+    When you install \QDS, everything you'll need to design UIs
+    using \l{Qt Quick} and to preview them on the desktop or on Android or
+    embedded Linux devices is automatically installed and configured correctly
+    for you.
+
+    Qt Quick enables you to build UIs around the behavior of
+    \e components and how they connect with one another. You
+    create components using Qt Quick and QML types that are available in
+    the Design mode. You can specify values for the \e properties of a
+    component to change its appearance and behavior. All QML types have a
+    set of predefined properties, some of which control things that are
+    visible to users, while others are used behind the scene.
+
+    While it is useful to learn the basics of Qt Quick, you can also rely on
+    \QDS to write the code for you when you drag-and-drop the ready-made
+    components to the working area and change them to your liking by modifying
+    their properties in the Design mode. You can always check up details in
+    the extensive Qt Quick documentation by pressing \key F1.
+
+    \list
+
+        \li \l {Creating Components}
+
+            In addition to your imported artwork, you can use the Design
+            mode to customize ready-made components or design any custom form
+            and shape directly as QML types. You can import visual assets in
+            various formats, such as PNG, JPG, and SVG for use in the
+            components.
+
+       \li \l {Managing Item Hierarchy}
+
+            You can manage the items in the current QML file and their
+            relationships in the \uicontrol Navigator.
+
+        \li \l {Specifying Item Properties}
+
+            You can specify values for the properties of a component to change
+            its appearance and behavior. All QML types have a set of predefined
+            properties. Some properties, such as position, size, and visibility,
+            are common to all QML types, whereas others are specific to the QML
+            type. You can specify properties for your components in the
+            \uicontrol Properties pane.
+
+        \li \l {Using Custom Fonts}
+
+            You can load custom fonts to \QDS and use them in your designs.
+    \endlist
+
+    \section1 Related Topics
+
+    \list
+        \li \l{Qt Quick UI Forms}
+
+            Some of the wizards create Qt Quick projects that contain UI forms
+            (.ui.qml files). The forms use a purely declarative subset of the
+            QML language and you can edit them in the Design mode.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
new file mode 100644
index 0000000000..5bb5b2f2de
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage index.html
+    \page studio-terms.html
+    \previouspage studio-faq.html
+    \nextpage creator-acknowledgements.html
+
+    \title Concepts and Terms
+
+    This topic describes main \QDS concepts and terms.
+
+    \section1 Component
+    \target glossary-component
+
+    An instantiable QML definition, typically contained in a .qml file.
+    For example, a Button component may be defined in Button.qml. The
+    QML runtime may instantiate this Button component to create Button
+    objects. Alternatively, a component may be defined inside a
+    \l{Component} QML type.
+
+    \section1 Deploy Configuration
+    \target glossary-deploy-config
+
+    Handles the packaging and copying of the necessary files to a location
+    you want to preview the UI at. The files can be copied to a location in
+    the file system of the development PC or a \l{glossary-device}{device}.
+
+    \section1 Device
+    \target glossary-device
+
+    An embedded device or an Anroid device.
+
+    \section1 Kit
+    \target glossary-buildandrun-kit
+
+    \QDS groups run settings as kits to make cross-platform development easier.
+    Each kit consists of a set of values that define one environment, such as a
+    \l{glossary-device} {device} to preview the UI on.
+
+    \section1 Mode
+    \target glossary-mode
+
+    Adapts the \QDS UI to the different UI design
+    tasks at hand. Each mode has its own view that shows only the information
+    required for performing a particular task, and provides only the most
+    relevant features and functions related to it. As a result, the majority
+    of the \QDS window area is always dedicated to the actual task.
+
+    \section1 Project
+    \target glossary-project
+
+    Groups together a set of files, images, and other assets that you
+    can deploy and run on different desktop and \l{glossary-device}{device}
+    platforms, as specified by a \e {deploy configuration} and
+    \e {run configuration}.
+
+    \section1 Run Configuration
+    \target glossary-run-config
+
+    Starts the UI in the location where it was copied by the
+    \e {deploy configuration}. By default, when you run a project, \QDS
+    deploys it to the \l{glossary-device}{device} specified in the
+    selected \l{glossary-buildandrun-kit}{kit}, and runs it there. However,
+    if you have not made any changes to the project since you last deployed
+    it, \QC simply runs it again.
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
new file mode 100644
index 0000000000..4c7af21e01
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -0,0 +1,160 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \page qtdesignstudio-toc.html
+
+    \title All Topics
+
+    \list
+        \li \l{Getting Started}
+            \list
+                \li \l{Exporting Artwork from Design Tools}
+                    \list
+                        \li \l{Exporting Designs from Adobe Photoshop}
+                            \list
+                                \li \l{Setting Up Qt Bridge for Adobe Photoshop}
+                                \li \l{Using Qt Bridge for Adobe Photoshop}
+                            \endlist
+                        \li \l{Exporting Designs from Sketch}
+                            \list
+                                \li \l{Setting Up Qt Bridge for Sketch}
+                                \li \l{Using Qt Bridge for Sketch}
+                            \endlist
+                        \li \l{Exporting from Maya}
+                    \endlist
+                \li \l{User Interface}
+                    \list
+                        \li \l{Selecting Modes}
+                        \li \l{Browsing Project Contents}
+                        \li \l{Viewing Output}
+                     \endlist
+                \li \l{Editing QML Files in Design Mode}
+                \li \l{Tutorials}
+            \endlist
+        \li \l{Managing Projects}
+            \list
+                \li \l{Creating Projects}
+                \li \l{Using Git}
+                \li \l{Importing Designs}
+                    \list
+                        \li \l{Importing 2D Assets}
+                        \li \l{Importing 3D Assets}
+                    \endlist
+                \li \l{Converting UI Projects to Applications}
+            \endlist
+        \li \l{Creating UIs}
+            \list
+                \li \l{Creating Components}
+                \list
+                    \li \l{Creating Buttons}
+                    \li \l{Creating Scalable Buttons and Borders}
+                \endlist
+                \li \l{Managing Item Hierarchy}
+                \li \l{Specifying Item Properties}
+                \li \l{Using Custom Fonts}
+                \li \l{Qt Quick UI Forms}
+           \endlist
+       \li \l {Adding Dynamics}
+            \list
+                \li \l{Creating Animations}
+                \li \l{Adding Connections}
+                \list
+                    \li\l{Connecting Objects to Signals}
+                    \li\l{Specifying Dynamic Properties}
+                    \li\l{Adding Bindings Between Properties}
+                \endlist
+                \li \l{Adding States}
+                \li \l{Editing PathView Properties}
+            \endlist
+        \li \b {\l{Editing 3D Scenes}}
+                \list
+                    \li \l{Editing 3D Assets in Design Mode}
+                    \li \l{Working in the 3D Editor}
+                    \li \l{Adding 3D Views}
+                    \li \l{Using 3D Components}
+                    \list
+                       \li \l{Setting Node Properties}
+                       \li \l{Adding Models}
+                       \li \l{Using Materials and Shaders}
+                        \li \l{Attaching Textures to Materials}
+                        \li \l{Using Lights}
+                        \li \l{Using Scene Camera}
+                        \li \l{Setting Scene Environment}
+                    \endlist
+               \endlist
+        \li \l{Previewing}
+            \list
+                \li \l{Previewing on Desktop}
+                \li \l{Previewing on Devices}
+                \li \l{Previewing in Browsers}
+            \endlist
+        \li \l{Advanced Topics}
+        \list
+            \li \l{Supported Platforms}
+            \li \l{Keyboard Shortcuts}
+            \li \l{Coding}
+            \list
+                \li \l{Writing Code}
+                    \list
+                        \li \l{Working in Edit Mode}
+                        \li \l{Semantic Highlighting}
+                        \li \l{Checking Code Syntax}
+                        \li \l{Completing Code}
+                        \li \l{Indenting Text or Code}
+                        \li \l{Using Qt Quick Toolbars}
+                        \li \l{Comparing Files}
+                    \endlist
+                \li \l{Finding}
+                    \list
+                        \li \l{Finding and Replacing}
+                        \li \l{Searching with the Locator}
+                    \endlist
+                \li \l{Refactoring}
+                \li \l{Configuring the Editor}
+                    \list
+                        \li \l{Specifying Text Editor Settings}
+                    \endlist
+                \endlist
+            \li \l{Simulating Application Logic}
+            \li \l{Debugging and Profiling}
+                \list
+                    \li \l{Debugging Qt Quick Projects}
+                    \li \l{Debugging a Qt Quick Example Application}
+                    \li \l{Profiling QML Applications}
+                \endlist
+            \li \l{Using External Tools}
+        \endlist
+        \li \l{Help}
+        \list
+            \li \l{Examples and Tutorials}
+            \li \l{Using the Help Mode}
+            \li \l{Frequently Asked Questions}
+            \li \l{Concepts and Terms}
+        \endlist
+        \li \l{Acknowledgements}
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc
new file mode 100644
index 0000000000..da98ee0690
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc
@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \previouspage creator-using-qt-quick-designer.html
+    \group gstutorials
+    \nextpage studio-projects-managing.html
+
+    \title Tutorials
+
+    \image loginui4.gif "Log In UI"
+
+    You can follow a set of hands-on tutorials that build on each other to
+    illustrate how to use the features of \QDS. In addition, the tutorials
+    provide additional information about the features of QML and Qt Quick
+    that are relevant to the task at hand. Even if you plan to export your
+    designs from a design tool, it is useful to first create a small UI from
+    scratch to learn the basic concepts of \QDS. In particular, Part 1
+    describes the terms and concepts that you will run into when exporting
+    designs with \QB.
+
+    Before you start, take a look at the following topics to familiarize
+    yourself with the parts of \QDS in general, and the Design mode in
+    particular: \l{User Interface} and \l{Editing QML Files in Design Mode}.
+
+    In addition to these entry-level tutorials, \QDS comes with examples
+    and video tutorials that you can open from the \uicontrol Examples and
+    \uicontrol Tutorials tabs in the \uicontrol Welcome mode. For more
+    information, see \l {Examples and Tutorials}.
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc
new file mode 100644
index 0000000000..e373dc80a8
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc
@@ -0,0 +1,104 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+//! [qml visual effects]
+
+    \section1 Applying Visual Effects
+
+    \QDS provides a set of Qt Quick Studio effects that inherit the types in the
+    \l {Qt Graphical Effects} module. To apply a visual effect to a component,
+    you must place the component inside the effect. First drag-and-drop an
+    effect from \uicontrol Library > \uicontrol Effects to the the canvas or
+    the \uicontrol Navigator, and then drag-and-drop the component to the
+    effect. For some effects, you need two source components.
+
+    The following table summarizes the available effects and contains links to
+    the documentation of the inherited QML type.
+
+    \table
+    \header
+        \li Qt Quick Studio Effect
+        \li Description
+    \row
+        \li \l [QML] {Blend}
+        \li Merges two source components by using a blend mode.
+
+            The default mode is \c subtract, where the pixel value from the
+            component that is going to be blended over the source component
+            is subtracted from the source and written.
+
+            For a list of possible values and examples of their use, see
+            \l{Blend::mode}{Blend.mode}.
+    \row
+        \li \l {FastBlur}{Blur}
+        \li Applies a fast blur effect to one or more source components.
+    \row
+        \li \l {BrightnessContrast}{Brightness Contrast}
+        \li Adjusts brightness and contrast.
+    \row
+        \li \l {ColorOverlay}{Color Overlay}
+        \li Alters the colors of the source component by applying an overlay
+            color.
+    \row
+        \li \l Colorize
+        \li Sets the color in the HSL color space.
+    \row
+        \li \l {DirectionalBlur}{Directional Blur}
+        \li Applies blur effect to the specified direction.
+    \row
+        \li \l {DropShadow}{Drop Shadow}
+        \li Generates a soft shadow behind the source component.
+    \row
+        \li \l [QML] {Glow}
+        \li Generates a halo-like glow around the source component.
+    \row
+        \li \l {HueSaturation}{Hue Saturation}
+        \li Alters the source component colors in the HSL color space.
+    \row
+        \li \l {OpacityMask}{Mask}
+        \li Masks the source component with another component.
+    \row
+        \li \l {MaskedBlur}{Masked Blur}
+        \li Applies a blur effect with a varying intesity.
+            The \l GradientStop type is used to specify the color used at a
+            given position in a gradient, as represented by a gradient stop.
+            The default positions for the stops are 0.20, 0.50, 0.80, and 1.00.
+            The default color is black.
+    \row
+        \li \l {RadialBlur}{Radial Blur}
+        \li Applies directional blur in a circular direction around the
+            component's center point.
+    \row
+        \li \l {Desaturate}{Saturation}
+        \li Reduces the saturation of the colors.
+    \row
+        \li \l {ZoomBlur}{Zoom Blur}
+        \li Applies directional blur effect towards source component's center
+            point.
+    \endtable
+
+//! [qml visual effects]
+*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc
new file mode 100644
index 0000000000..f69cd066c6
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc
@@ -0,0 +1,119 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage{index.html}{Qt Design Studio}
+    \page index.html
+    \nextpage studio-getting-started.html
+
+    \title Qt Design Studio Manual
+
+    \QDS is a UI design and development environment for creating animated UIs
+    and previewing them on the desktop or on Android and embedded Linux devices.
+    It provides you with tools for accomplishing your tasks throughout the whole
+    process, from design to production.
+
+    \table
+        \row
+            \li \inlineimage studio-gs.png
+            \li \inlineimage studio-projects.png
+            \li \inlineimage studio-components.png
+            \li \inlineimage studio-animation.png
+        \row
+        \li \l{Getting Started}
+            \list
+                \li \l{Exporting Artwork from Design Tools}
+                \li \l{User Interface}
+                \li \l{Editing QML Files in Design Mode}
+                \li \l{Tutorials}
+            \endlist
+            \li \b {\l{Managing Projects}}
+                \list
+                    \li \l{Creating Projects}
+                    \li \l{Using Git}
+                    \li \l{Importing Designs}
+                    \li \l{Converting UI Projects to Applications}
+                \endlist
+            \li \b {\l{Creating UIs}}
+                \list
+                    \li \l{Creating Components}
+                    \li \l{Managing Item Hierarchy}
+                    \li \l{Specifying Item Properties}
+                    \li \l{Using Custom Fonts}
+                \endlist
+        \li \b {\l{Adding Dynamics}}
+            \list
+                \li \l{Creating Animations}
+                \li \l{Adding Connections}
+                \li \l{Adding States}
+                \li \l{Editing PathView Properties}
+            \endlist
+        \row
+            \li \inlineimage studio-3d-scenes.png
+            \li \inlineimage studio-preview.png
+            \li \inlineimage studio-settings.png
+            \li \inlineimage studio-help.png
+        \row
+            \li \b {\l{Editing 3D Scenes}}
+                \list
+                    \li \l{Editing 3D Assets in Design Mode}
+                    \li \l{Working in the 3D Editor}
+                    \li \l{Adding 3D Views}
+                    \li \l{Using 3D Components}
+                \endlist
+            \li \b {\l{Previewing}}
+                \list
+                    \li \l{Previewing on Desktop}
+                    \li \l{Previewing on Devices}
+                    \li \l{Previewing in Browsers}
+                \endlist
+            \li \b {\l{Advanced Topics}}
+                \list
+                    \li \l{Supported Platforms}
+                    \li \l{Keyboard Shortcuts}
+                    \li \l{Coding}
+                    \li \l{Simulating Application Logic}
+                    \li \l{Debugging and Profiling}
+                \endlist
+            \li \b {\l{Help}}
+                \list
+                    \li \l{Examples and Tutorials}
+                    \li \l{Using the Help Mode}
+                    \li \l{Frequently Asked Questions}
+                    \li \l{Concepts and Terms}
+                \endlist
+        \row
+            \li {4,1} \l{All Topics}
+        \row
+            \li {4,1} \note To report bugs and suggestions to the Qt Bug
+                Tracker, select \uicontrol {Help > Report Bug}.
+                To copy and paste detailed information about your system to the
+                bug report, select \uicontrol Help >
+                \uicontrol {System Information}.
+
+                For credits and a list of third-party libraries, see
+                \l {Acknowledgements}.
+    \endtable
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc
new file mode 100644
index 0000000000..53d3009a78
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-maya.qdoc
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page exporting-from-maya.html
+    \previouspage qtbridge-sketch-using.html
+    \nextpage creator-quick-tour.html
+
+    \title Exporting from Maya
+
+    You can export graphics from Maya in the FBX format. The necessary plugin is
+    usually enabled by default, but you can check that in the plugin manager.
+
+    To export graphics from Maya:
+
+    \list 1
+        \li Select \uicontrol Window > \uicontrol Settings/Preferences >
+            \uicontrol {Plug-in Manager} and check that the fbxmaya.mll
+            plugin is enabled.
+        \li Select \uicontrol File > \uicontrol {Export All}.
+            \image maya-export-options.png "Export options in Maya"
+        \li In the \uicontrol {File name} field, enter a name for the export
+            file.
+        \li In the \uicontrol {Files of type} field, select
+            \uicontrol {FBX export}.
+        \li In \uicontrol Presets > \uicontrol {Current Preset}, select
+            \uicontrol {Autodesk Media & Entertainment}.
+        \li In \uicontrol Geometry > \uicontrol {Convert NURBS surface to},
+            select \uicontrol {Interactive Display Mesh}.
+        \li To export files, select \uicontrol {Export All}.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
new file mode 100644
index 0000000000..0c33b4bc20
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
@@ -0,0 +1,113 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d-camera.html
+    \previouspage studio-3d-lights.html
+    \nextpage studio-3d-scene-environment.html
+
+    \title Using Scene Camera
+
+    A camera is always necessary to view the content of a 3D scene. A camera
+    defines how to project the content of a 3D scene into a 2D coordinate space,
+    which can then be used on a 2D surface. When a camera is present in the
+    scene, it can be used to direct what is displayed in a 3D view.
+
+    You can use the following 3D QML types to determine camera projection:
+
+    \list
+        \li \l{PerspectiveCamera}{Camera Perspective} - is the standard camera
+            type, which uses field of view and near and far clip planes to
+            specify the projection.
+        \li \l{OrthographicCamera}{Camera Orthographic} - renders all contents
+            with no perspective. It is ideal for rendering 2D elements, because
+            your images are guaranteed to be the right size on the screen, and
+            you can use the z position of components to bring them closer to or
+            take them farther from the camera (\e z-sorting) with no
+            foreshortening artifacts.
+        \li \l{FrustumCamera}{Camera Frustum} - enables finer grain control of
+            how the frustum is defined, by setting the number of degrees between
+            the top and bottom or left and right edges of the camera frustum.
+            This is useful when creating asymmetrical frustums.
+        \li \l{CustomCamera}{Camera Custom} - provides  full control over how
+            the projection matrix is created.
+    \endlist
+
+    You can position the camera in the scene and set the direction it is facing.
+    The default direction of the camera is such that the forward vector is
+    looking up the +z axis, and the up direction vector is up the +y axis. You
+    can apply transforms to the camera and its parent types to define
+    exactly where your camera is located and in which direction it is facing.
+
+    The second part of determining the projection of the camera is defining the
+    field of view (\e frustum) of the camera that defines which parts of the
+    scene are visible, as well as how they are visible.
+
+    You can edit the camera properties in the \uicontrol Properties view.
+
+    \section1 Setting Camera Field of View
+
+    The camera frustum can be obtained by taking a frustum (that is, a
+    truncation with parallel planes) of the cone of vision that a camera or eye
+    would have to the rectangular viewports typically used in computer graphics.
+    The shape of the cone depends on the camera lens that is being simulated.
+    Typically, it is a rectangular pyramid with the top cut off.
+
+    The planes that cut the frustum perpendicular to the viewing direction are
+    called the \e {near plane} and the \e {far plane}. Components in front of
+    the near plane or behind the far plane are not drawn.
+
+    The \uicontrol {Clip near} and \uicontrol {Clip far} properties determine
+    the position of the near plane and the far plane. We recommend that
+    you place the near and far planes as close to each other as possible to
+    optimize depth accuracy. Components are clipped at pixel level instead of
+    element level. This means that a model crossing a plane may be only
+    partially rendered.
+
+    The \uicontrol {Field of view} (FOV) property specifies the number of
+    degrees between the edges of the camera frustum. The larger the value,
+    the stronger the sense of 3D in your scene. By default, the
+    \uicontrol {FOV orientation} property is set to use the vertical FOV.
+    This value is the number of degrees between the top and bottom edges
+    of the camera frustum.
+
+    The horizontal FOV determines the number of degrees between the left and
+    right edges of the camera frustum. It is automatically calculated based on
+    the aspect ratio of the scene when the FOV orientation is set to vertical.
+    You can set the orientation to horizontal to translate FOV values from
+    graphics tools such as Maya and Blender, which use horizontal FOV by
+    default.
+
+    The default values are intended to cause anything within the view
+    of the camera to be rendered. Aside from special clipping effects, you
+    may need to adjust these values to more closely contain your content for
+    better results with ambient occlusion or with effects that use the depth
+    buffer of the camera, such as the \e {depth of field} effect.
+
+    \note Orthographic cameras don't have the FOV property.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc
new file mode 100644
index 0000000000..38a71a1b53
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d-components.html
+    \previouspage studio-3d-view.html
+    \nextpage studio-3d-node.html
+
+    \title Using 3D Components
+
+    To add 3D components to the scene, drag and drop a them from
+    \uicontrol Library > \uicontrol {QML Types} > \uicontrol {Qt Quick 3D} to
+    the scene or to a 3D view in the \uicontrol Navigator.
+
+    To edit 3D components, select the component in the 3D editor or in the
+    \uicontrol Navigator and set its properties in the \uicontrol Properties
+    view.
+
+    \list
+        \li \l {Setting Node Properties}
+
+            You can set the opacity, visibility, and transform properties
+            of all 3D components.
+        \li \l {Adding Models}
+
+            You can use the model component to load static mesh data from
+            storage or one of the built-in primitive types: cube, cone,
+            cylinder, rectangle, or sphere. You can attach materials to
+            meshes and sub-meshes.
+        \li \l {Using Materials and Shaders}
+
+            You can use materials and shaders to define how object surfaces
+            are rendered in a scene and during live preview.
+        \li \l {Attaching Textures to Materials}
+
+            You can use a Texture component to specify an image and how it is
+            mapped to meshes in a 3D scene. Texture components can use image
+            data either from a file or a Qt Quick QML type.
+        \li \l{Using Lights}
+
+            You can use several light types as the source of lighting in a
+            scene and set their properties.
+        \li \l {Using Scene Camera}
+
+            To project a 3D scene to a 2D viewport, it is necessary to view
+            the scene from a camera. You can select the camera type and set
+            its properties.
+        \li \l {Setting Scene Environment}
+
+            You can use the SceneEnvironment type to specify how the scene is
+            rendered globally.
+     \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc
new file mode 100644
index 0000000000..e214c544f2
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc
@@ -0,0 +1,88 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage studio-3d.html
+    \page studio-3d-design-mode.html
+    \nextpage studio-3d-editor.html
+
+    \title Editing 3D Assets in Design Mode
+
+    \QDS opens QML files that contain 3D scenes in the Design mode and the
+    scenes in the 3D editor. You can add imported 3D assets as resources
+    to projects and edit them to create scenes and states, as well as the
+    transitions between them.
+
+    \image studio-editing-3d-scenes.png "3D assets in Design mode"
+
+    To edit 3D scenes in the Design mode:
+
+    \list
+        \li \uicontrol {3D Editor} (1) is the working area where you create the
+            scene, position the model, light and camera, as well as move and
+            scale items.
+        \li \uicontrol {3D View} (2) is where you see the scene projected by the
+            camera.
+        \li The sidebars contain views where you can select QML types to use in
+            the scene, specify properties for them, and view them in a tree
+            structure, as well as to create connections and browse projects and
+            files. You can select the content of the sidebars in the sidebar
+            menu:
+        \list
+            \li \uicontrol {Library} (3) displays the building blocks that you
+                can use to create scenes: predefined Qt Quick 3D Components,
+                Qt Quick Controls, your own 3D assets that you import to the
+                project, and other resources. For more information, see
+                \l {Adding 3D Views}.
+            \li \uicontrol {Navigator} (4) displays the items in the current QML
+                file as a tree structure. For more information, see
+                \l {Managing Item Hierarchy}.
+            \li \uicontrol {Properties} (5) organizes the properties of the
+                selected item. You can change the properties also in the
+                \uicontrol {Text Editor}. For more information, see
+                \l {Specifying Item Properties}.
+            \li \uicontrol Connections enables you to create connections
+                between objects, signals, and object properties. For more
+                information, see \l{Adding Connections}.
+            \li \uicontrol {File System} shows all files in the currently
+                selected directory. For more information, see
+                \l{Viewing the File System}.
+            \li \uicontrol {Open Documents} shows currently open files.
+            \li \uicontrol {Projects} shows a list of projects open in the
+                current session. For more information, see
+                \l{Viewing Project Files}.
+        \endlist
+        \li \uicontrol {States} displays the different states of the
+            item. QML states typically describe user interface configurations,
+            such as the UI controls, their properties and behavior and the
+            available actions. For more information, see \l{Adding States}.
+        \li \uicontrol Timeline (6) provides a timeline and keyframe based
+            editor that enables you to animate the properties of components.
+    \endlist
+
+    To close the 3D editor, select \uicontrol 2D in the list on the toolbar (7).
+    To reopen it, select \uicontrol {2D/3D}.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
new file mode 100644
index 0000000000..034a4817ab
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
@@ -0,0 +1,176 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage studio-3d-design-mode.html
+    \page studio-3d-editor.html
+    \nextpage studio-3d-view.html
+
+    \title Working in the 3D Editor
+
+    To project a 3D scene to a 2D viewport, it is necessary to view the scene
+    from a \l{Using Scene Camera}{camera}. Select the \uicontrol {Toggle
+    Perspective/Orthographic Projection} button (1) on the 3D editor toolbar to
+    switch between a \e {perspective camera} and an \e {orthographic camera}.
+    A perspective camera uses field of view and near and far clip planes to
+    specify the projection, whereas an orthographic camera can be thought of
+    as a 2D camera. Both of them are free-form cameras that you can use to
+    orbit around the scene.
+
+    When you import 3D scenes from files that you exported from 3D graphics
+    tools, you also import the camera, light, model, and materials. If your
+    scene did not contain them, you can add the corresponding Qt Quick 3D
+    types from the \uicontrol Library.
+
+    You can use the manipulator mode toolbar buttons (2) to show the move, rotate,
+    or scale manipulator in the rendered scene when an item is selected and
+    to determine what happens when you drag the selected item. Select the
+    \uicontrol {Toggle Local/Global Orientation} button (3) to determine whether
+    the manipulators affect only the local transforms of the item or whether
+    they transform with respect to the global space.
+
+    \image studio-3d-editor.png "3D Editor"
+
+    For example, in local orientation mode, selecting an unrotated cube inside
+    a rotated group in the move mode shows rotated axes. Dragging on the red
+    arrow of the move manipulator affects only the x position of the item.
+
+    In global mode, the manipulators always transform with respect to the global
+    space. In the example above, switching to global mode will show the red
+    arrow for the move manipulator aligned with the screen (assuming an
+    unrotated camera). Dragging on the red arrow may affect two or three of the
+    position values for the selected item in order to move it in global space.
+
+    \section1 Controlling the Edit View Camera
+
+    You can add 3D camera types to the scene to project the view you see in
+    the View3D type in the application. While editing scenes, you can use
+    a separate \e {edit view camera} (4) to project the scene to the 3D edit
+    view in the Design mode.
+
+    You can navigate the scene by rotating, panning, and zooming the edit view
+    camera.
+
+    To zoom, use the mouse wheel or press \key Alt and right-click anywhere in
+    the rendered view to zoom the view in or out as you drag up or down.
+
+    To pan, press \key Alt and use the middle mouse button to click anywhere in
+    the rendered view to slide the view around.
+
+    To orbit, press \key Alt and click anywhere in the rendered view to rotate
+    the view.
+
+    To scale the edit view camera and to focus it on the selected items, select
+    \uicontrol {Fit Selected} button or press \key F.
+
+    The world axis helper (5) shows the direction of the world axes in respect
+    to the edit view camera. To point the camera at the currently selected
+    component in the direction of an axis, click the axis. If no component
+    is selected, the camera is pointed at the world origin. This does not
+    affect the camera zoom level.
+
+    For more information about using the cameras in the scene, the available
+    3D camera types, and their properties, see \l{Using Scene Camera}.
+
+    \section1 Selecting Items
+
+    To move, rotate, or scale items in the scene, you need to select them first.
+    The selection mode buttons determine how items are selected when you click
+    them in the 3D editor.
+
+    \list
+        \li In the \inlineimage item_selection_selected.png
+            (\uicontrol {Select Item}) mode, a single item is selected.
+        \li In the \inlineimage group_selection_selected.png
+            (\uicontrol {Select Group}) mode, the top level parent of the item
+            is selected. This enables you to move, rotate, or scale a group of
+            items.
+    \endlist
+
+    To toggle the selection mode, press \key Q.
+
+    \section1 Moving Items
+
+    \image studio-3d-editor-move.png "3D editor in move mode"
+
+    You can move items in relation to their coordinate system, along the x, y,
+    or z view axis or on the top, bottom, left, and right clip planes of the
+    render camera.
+
+    To move items, select \inlineimage move_selected.png
+    or press \key W.
+
+    To move items along an axis, click the axis and drag the item along the
+    axis.
+
+    To move items on a plane, select the plane handle and drag the item on
+    the plane.
+
+    To move an item freely in the editor, select the handle at the center of
+    the item.
+
+    \section1 Rotating Items
+
+    You can rotate items around the view axes of the camera.
+
+    \image studio-3d-editor-rotate.png "3D editor in rotate mode"
+
+    To rotate items, select \inlineimage rotate_selected.png
+    or press \key E.
+
+    To rotate an item around an axis, select the axis and drag in the direction
+    you want to rotate the item in.
+
+    To freely rotate the item, select the gray circle.
+
+    \section1 Scaling Items
+
+    \image studio-3d-editor-scale.png "3D editor in scale mode"
+
+    To scale items, select \inlineimage scale_selected.png
+    or press \key R.
+
+    You can use the scale handles to adjust the local x, y, or z scale of an
+    item. You can ajust the scale across one, two, or three axes, depending
+    on the handle.
+
+    To adjust the scale across one axis, select the scale handle attached to
+    the axis. To uniformly scale an item across all axes, select the handle
+    at the center of the item.
+
+    To adjust the scale across a plane, select the plane handle and drag the
+    item on the plane.
+
+    \section1 Using Edit View Light
+
+    You use 3D light types to light the models in the scene. While editing
+    scenes, you can use a separate \e {edit view light} to illuminate the
+    portions of the scene that the scene lights do not hit. To switch the edit
+    view light on and off, select the \uicontrol {Toggle Edit Light} button (6).
+
+    For more information about the available scene light types and their
+    properties, see \l{Using Lights}.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
new file mode 100644
index 0000000000..a247785f03
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
@@ -0,0 +1,165 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d-lights.html
+    \previouspage studio-3d-texture.html
+    \nextpage studio-3d-camera.html
+
+    \title Using Lights
+
+    Light components are the primary source of lighting in a \QDS scene.
+    As a secondary light source, you can use \l{Using Image-based Lighting}
+    {image-based lighting}.
+
+    By default, all imported scenes are created with one directional light.
+    You can use the following \l{Qt Quick 3D} components to add lights:
+
+    \list
+        \li \l{DirectionalLight}{Light Directional}
+        \li \l{PointLight}{Light Point}
+        \li \l{AreaLight}{Light Area}
+    \endlist
+
+    \note Each additional light negatively effects the rendering performance
+    of your scene. Keep scenes as simple as possible and use lights sparingly.
+    Use a \l{SceneEnvironment}{Scene Environment} component to apply image-based
+    lighting that can produce soft and subtle lighting.
+
+    You can edit light properties in the \uicontrol Properties view. The
+    \uicontrol Scope property specifies which node, with it's children,
+    is illuminated by a light.
+
+    Set the \uicontrol {Color} property to specify the color applied to models
+    illuminated by a light. Set the \uicontrol {Ambient color} property to
+    specify the ambient color applied to materials before being illuminated by
+    the light.
+
+    You can animate light properties in the \uicontrol Timeline view.
+
+    \section1 Directional Light
+
+    A directional light emits light in one direction from a unidentifiable
+    source located infinitely far away. This is similar to sunlight.
+
+    \image studio-3d-directional-light.png "Models lit by a dirctional light"
+
+    If the \uicontrol {Casts shadow} property is enabled, shadows are positioned
+    parallel to the light direction. A directional light has infinite range and
+    does not diminish.
+
+    Moving a directional light does not have any effect. The light will always
+    be emitted in the direction of the light's z axis. Rotating the light along
+    its x or y axis will change the direction in which the light is emitted.
+
+    Scaling a directional light will only have an effect in the following cases:
+
+    \list
+        \li If the z scale is set to a negative number, the light will be
+            emitted in the opposite direction.
+        \li If the scale of any axis is set to 0, the light will be emitted
+            along the world's z axis. Rotating the light has no effect.
+    \endlist
+
+    \section1 Point Light
+
+    A point light can be described as a sphere, emitting light with equal
+    strength in all directions from the center of the light. This is similar
+    to the way a light bulb emits light.
+
+    \image studio-3d-point-light.png "Models lit by a point light"
+
+    Lighting is applied outwards from the center of a point light, becoming
+    increasingly dim away from the center. Moving a point light changes the
+    position from where the light is emitted. Rotating or scaling a point
+    light does not have any effect.
+
+    To specify an overall multiplier for a point light's effects, set the
+    \uicontrol Brightness property.
+
+    To control the fade-off and range of a point light, set the
+    \uicontrol {Constant fade}, \uicontrol {Linear fade}, and
+    \uicontrol {Quadratic fade} properties. Constant fade is the constant
+    factor of the \e attenuation term of the light. Attenuation refers to
+    the reduction in the intensity of light as it travels through a medium
+    due to absorption or scattering of photons.
+
+    Turn up the linear fade value to increase the rate at which the lighting
+    effect dims the light in proportion to the distance to the light. The value
+    0.0 means that the light doesn't have linear fade.
+
+    Turn up the quadratic fade to increase the rate at which the lighting effect
+    dims on surfaces that are far away from the light. The value 1.0 means that
+    the point light fade exactly follows the inverse square law. For example,
+    when the distance to an object doubles, the light intensity decreases to one
+    fourth.
+
+    Aside from fade, a point light has the same properties as a directional
+    light.
+
+    \section1 Area Light
+
+    An area light is similar to the directional light. However, instead of
+    emitting an equally bright light across the whole scene, the area light
+    emits directional light from a rectangle shaped object. You can set the
+    \uicontrol Width and \uicontrol Height properties to determine the size
+    of the area light.
+
+    Aside from the size, an area light has the same properties as a directional
+    light.
+
+    The image below shows an example on how to light an object with different
+    colors using two different area lights.
+
+    \image area-light.png
+
+    You can rotate, scale, and move area lights.
+
+    \section1 Shadows
+
+    To simulate shadows using this light, enable the \uicontrol {Cast shadows}
+    check box. Cast shadows work best with area or point lights.
+
+    To specify the darkness of the shadows, set the \uicontrol {Shadow factor}
+    property. The value 0 means no shadows are cast.
+
+    To specify the amount of blur applied to the shadows, set the
+    \uicontrol {Shadow filter} property.
+
+    Tweak the \uicontrol {Shadow bias} property value by small amounts
+    if you see objects casting shadows on themselves.
+
+    To specify the quality of the shadow map created for shadow rendering, set
+    the \uicontrol {Shadow map quality} property. Lower quality uses less
+    resources, but produces lower quality shadows, while higher quality uses
+    more resources to produce better quality shadows.
+
+    To specify the maximum distance for the shadow map, set the
+    \uicontrol {Shadow map far} property value. Using smaller values
+    may improve the precision and effects of the map.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc
new file mode 100644
index 0000000000..ecbef398dc
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc
@@ -0,0 +1,229 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Desing Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d-materials.html
+    \previouspage studio-3d-model.html
+    \nextpage studio-3d-texture.html
+
+    \title Using Materials and Shaders
+
+    \image materials.png
+
+    Materials and shaders define how object surfaces are rendered in \QDS and
+    live preview. As you change the properties of materials, new shaders are
+    generated accordingly, and the property values are bound. The complexity of
+    a shader depends on a combination of the properties that are set on it, and
+    the context of the scene itself.
+
+    The materials that you used in your imported scenes are imported to \QDS
+    as \l{Qt Quick 3D} components. When you add a View3D component, it contains
+    a DefaultMaterial component. You can use the following predefined Qt Quick
+    3D components to add materials to models:
+
+    \list
+        \li Default material
+        \li Principled material
+        \li Texture
+    \endlist
+
+    Before a model can be rendered in a scene, it must have at least one
+    material to define how the mesh is shaded. The DefaultMaterial component
+    is the easiest way to define such a material. The PrincipledMaterial
+    component specifies the minimum amount of properties.
+
+    You can use the \l Texture component to apply textures to materials. It
+    defines an image and how the image is mapped to meshes in a 3D scene. To
+    use image data from a file, set the \uicontrol Source property of the
+    Texture component in the \uicontrol Properties view.
+
+    To have the material use vertex colors from the mesh, select the
+    \uicontrol {Enable vertex colors} check box. These are multiplied
+    by any other colors specified for the material.
+
+    You can modify material properties in the \uicontrol Properties view, as
+    instructed in the following sections. The availability of the properties
+    depends on the material type.
+
+    You can animate material properties in the \uicontrol Timeline view, as
+    instructed in \l {Creating Animations}.
+
+    \section1 Blending Colors
+
+    To determine how the colors of a model blend with the colors of the models
+    behind it, set the \uicontrol {Blend mode} property. To make opaque objects
+    occlude the objects behind them, select \uicontrol {SourceOver}.
+
+    For a lighter result, select \uicontrol Screen to blend colors using an
+    inverted multiply or \uicontrol ColorDodge to blend them by inverted
+    division. Color dodge procudes an even lighter result than screen.
+
+    For a darker result, select \uicontrol Multiply to blend colors using a
+    multiply or \uicontrol ColorBurn to blend them by inverted division, where
+    the result also is inverted. Color burn produces an even darker result than
+    multiply.
+
+    The screen and multiply modes are order-independent, so select them to
+    avoid \e popping, which can happen when using semi-opaque objects and
+    sorting the back and front faces or models.
+
+    For a result with higher contrast, select \uicontrol Overlay, which is a mix
+    of the multiply and screen modes.
+
+    \section1 Lighting Materials
+
+    To set the lighting method for generating a material, use the
+    \uicontrol Lighting property. Select \uicontrol {Fragment lighting} to
+    calculate diffuse and specular lighting for each rendered pixel. Some
+    effects, such as Fresnel or a bump map, require fragment lighting.
+
+    To skip lighting calculation, select \uicontrol {No lighting}. This is very
+    fast and quite effective when using image maps that do not need to be shaded
+    by lighting.
+
+    To set the base color for the material, use the \uicontrol {Diffuse Color}
+    property. You can either use the color picker or specify a RBG value. Set
+    the diffuse color to black to create purely-specular materials, such as
+    metals or mirrors. To apply a texture to a material, set it as the value of
+    the \uicontrol {Diffuse map} property. Using a texture with transparency
+    also applies the alpha channel as an \uicontrol {Opacity map}. You can set
+    the opacity of the material independently of the model as the value of the
+    \uicontrol Opacity property.
+
+    \section1 Self-Illuminating Materials
+
+    To set the color and amount of self-illumination for a material, use the
+    \uicontrol {Emissive color} and \uicontrol {Emissive factor} properties. In
+    a scene with black ambient lighting, a material with an emissive factor of 0
+    is black where the light does not shine on it. Setting the emissive factor
+    to 1 shows the material in its diffuse color instead.
+
+    To use a Texture for specifying the emissive factor for different parts of
+    the material, set the \uicontrol {Emissive map} property. Using a grayscale
+    image does not affect the color of the result, while using a color image
+    produces glowing regions with the color affected by the emissive map.
+
+    \section1 Using Highlights and Reflections
+
+    You can control the highlights and reflections on a material by setting the
+    properties in the \uicontrol Specular group. You can use the color picker
+    or set a RGB value to specify the color used to adjust specular reflections.
+    Use white for no effect
+
+    To use a color texture to modulate the amount and the color of specularity
+    across the surface of a material, set the \uicontrol {Specular map}
+    property. Set the \uicontrol {Specular amount} property to specify the
+    strength of specularity. This property does not affect the specular
+    reflection map, but it does affect the amount of reflections from a scene's
+    light probe.
+
+    \note Unless your mesh is high-resolution, you may need to use fragment
+    lighting to get good specular highlights from scene lights.
+
+    To determine how to calculate specular highlights for lights in the scene,
+    set the \uicontrol {Specular model}. In addition to the default mode, you
+    can use the GGX or Ward lighting model.
+
+    To use a Texture for specular highlighting on a material, set the
+    \uicontrol {Reflection map} property. When the texture is applied using
+    environmental mapping (not UV mapping), the map appears to be reflecting
+    from the environment as you rotate the model. Specular reflection maps are
+    an easy way to add a high-quality look at a relatively low cost.
+
+    To specify an image to use as the specular reflection map, set the
+    \uicontrol {Light probe} property
+
+    Crisp images cause your material to look very glossy. The more you
+    blur your image, the softer your material appears.
+
+    To decrease head-on reflections (looking directly at the surface)
+    while maintaining reflections seen at grazing angles, set the
+    \uicontrol {Fresnel power} property. To select the angles to control,
+    set the \uicontrol {Index of refraction} property.
+
+    To control the size of the specular highlights generated from lights and the
+    clarity of reflections in general, set the \uicontrol {Specular roughness}
+    property. Larger values increase the roughness, while softening specular
+    highlights and blurring reflections. To control the specular roughness of
+    the material using a Texture, set the \uicontrol {Roughness map property}.
+
+    \section1 Simulating Geometry Displacement
+
+    Specify the properties in the \uicontrol {Bump/Normal} group to simulate
+    fine geometry displacement across the surface of the material. Set the
+    \uicontrol {Bump map} property to use a grayscale texture for the
+    simulation. Brighter pixels indicate raised regions.
+
+    To use a RGB image for simulation, set the \uicontrol {Normal map} property.
+    The RGB channels indicate XYZ normal deviations.
+
+    The amount of displacement is controlled by the \uicontrol {Bump amount}
+    property.
+
+    Bump and normal maps do not affect the silhouette of a model. To affect the
+    silhouette, set the \uicontrol {Displacement map} property. It specifies a
+    grayscale image used to offset the vertices of geometry across the surface
+    of the material. The \uicontrol {Displacement amount} property specifies the
+    offset amount.
+
+    \section1 Specifying Material Translucency
+
+    Set the properties in the \uicontrol Translucency group to control how much
+    light can pass through the material from behind. To use a grayscale texture,
+    specify it as the value of the \uicontrol {Translucency map} property.
+
+    To specify the amount of light wrap for the translucency map, set the
+    \uicontrol {Diffuse light wrap} property. A value of 0 does not wrap the
+    light at all, while a value of 1 wraps the light all around the object.
+
+    To specify the amount of falloff for the translucency based on
+    the angle of the normals of the object to the light source, set
+    the \uicontrol {Translucency falloff} property.
+
+    \section1 Culling Faces
+
+    Set the \uicontrol {Culling mode} property to determine whether the front
+    and back faces of a model are rendered. Culling modes check whether the
+    points in the polygon appear in clockwise or counter-clockwise order when
+    projected onto the screen. If front-facing polygons have a clockwise
+    winding, but the polygon projected on the screen has a counter-clockwise
+    winding, the projected polygon is rotated to face away from the camera and
+    is not rendered. Culling makes rendering objects quicker and more efficient
+    by reducing the number of polygons to draw.
+
+    \section1 Applying Materials to Models
+
+    To apply materials to models:
+
+    \list 1
+        \li Drag and drop a material component from the \uicontrol Library to a
+            Model component in the \uicontrol Navigator or 3D editor.
+        \li Edit the properties of the material in the \uicontrol Properties
+            view.
+    \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc
new file mode 100644
index 0000000000..4fa05b6463
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d-model.html
+    \previouspage studio-3d-node.html
+    \nextpage studio-3d-materials.html
+
+    \title Adding Models
+
+    A Model component loads mesh data from a file. You can modify how the
+    component is shaded by adding materials to the model.
+
+    A model can load static meshes from storage or one of the built-in primitive
+    types: cube, cone, cylinder, rectangle, or sphere. You can select the model
+    type in the \uicontrol Source field in the \uicontrol Properties field.
+    Select the \inlineimage plus.png
+    button to add custom model types to the list.
+
+    To enable picking the model against the scene, select the
+    \uicontrol Pickable check box. Picking transforms the screen
+    space x and y coordinates to a ray cast towards the specified
+    position in scene space.
+
+    To use the geometry of this model when rendering to shadow maps, select the
+    \uicontrol {Casts shadows} check box. To allow casting shadows on the model,
+    select the \uicontrol {Receives shadows} check box.
+
+    \section1 Tessellation
+
+    To dynamically generate additional geometry for the model, select the
+    tiling mode in the \uicontrol {Tessellation mode} filed. Tessellation
+    is useful when using a displacement map with geometry, or to generate a
+    smoother silhouette when zooming in. You can select either a Phong or
+    an NPatch tessellation generator.
+
+    Specify an edge multiplier to the tessellation generator in the
+    \uicontrol {Edge tessellation} field and an inner multiplier in
+    the \uicontrol {Inner tessellation} field.
+
+    To display a wireframe that highlights the additional geometry created by
+    the tessellation generator, select the \uicontrol {Enable wireframe mode}
+    check box.
+
+    \section1 Adding Materials to Sub-Meshes
+
+    A model can consist of several sub-meshes, each of which can have its own
+    material. Select the material from the list in the \uicontrol {Materials}
+    field. Select the \inlineimage plus.png
+    button to add materials to the list. For more information about materials,
+    see \l {Using Materials and Shaders}.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc
new file mode 100644
index 0000000000..a13bb46725
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc
@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage studio-3d-components.html
+    \page studio-3d-node.html
+    \nextpage studio-3d-model.html
+
+    \title Setting Node Properties
+
+    You can set the opacity, visibility, and transform properties of a 3D
+    component in the \uicontrol Properties view.
+
+    \section1 Setting Component Opacity and Visibility
+
+    All components have an \uicontrol Opacity value applied to them. The opacity
+    of 100 makes a component fully opaque, while the opacity of 0 prevents a
+    component from rendering at all.
+
+    Just as modifying the position or rotation of a parent component affects
+    all child components, opacity is multiplicatively cumulative through
+    the transform hierarchy. A cube that is 50\% opaque inside a group that
+    is 80\% opaque renders with an equivalent apperance of 40\% opacity
+    (\c{0.8 * 0.5 = 0.4}). Setting the opacity of a group to 0 prevents
+    any descendants within the group from rendering.
+
+    The \uicontrol Visibility property provides an alternative way to hide and
+    show components. It is useful when you want to show a component in a
+    particular state, but hide it in another state, for example.
+
+    \section1 Setting Transform Properties
+
+    The value of the \uicontrol Translation property contains the position
+    translation of the component in the local coordinate space established by
+    the parent component. The \uicontrol Orientation property specifies whether
+    the left-handed or right-handed coordinate system is used.
+
+    In the y-up left-handed coordinate system, increasing the value of x
+    moves the component to the right, as seen from the default camera location,
+    whereas increasing the value of y moves the component up. Increasing the
+    value of z moves the component away from the camera.
+
+    The value of the \uicontrol Rotation parameter sets the local rotation of
+    the component in the space established by the parent component. The
+    \uicontrol {Rotation order} property specifies whether the left-handed or
+    right-handed (the values with \e r) rotation about the x, y, and z axes
+    is applied, and the order in which the rotation is applied on each axis.
+
+    The value of the \uicontrol Scale property sets the local scale of the
+    component in the space established by the parent component. An odd number
+    of negative scale values causes the component to render \e {inside-out},
+    which cannot be seen due to backface-culling.
+
+    The value of the \uicontrol Pivot property sets the local pivot offset for
+    the component. You can think of the pivot as offsetting the geometry for the
+    component away from the origin, allowing a component to rotate and scale
+    around a point other than its local origin. Pivot values are applied before
+    scaling and rotation values.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc
new file mode 100644
index 0000000000..0951110886
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc
@@ -0,0 +1,156 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d-scene-environment.html
+    \previouspage studio-3d-camera.html
+    \nextpage creator-live-preview.html
+
+    \title Setting Scene Environment
+
+    You can use the SceneEnvironment type to specify how the scene is rendered
+    globally. You can specify settings for antialiasing, scene background,
+    ambient occlusion, and image based lighting in the \uicontrol Properties
+    view.
+
+    \section1 Antialiasing
+
+    You can apply temporal, progressive, or multisample antialiasing to
+    scenes. Temporal and progressive antialiasing jiggle the camera very
+    slightly between frames and blend the result of each new frame with
+    the previous frames, while multisample antialiasing super-samples
+    the edges of geometry.
+
+    Temporal antialiasing finds real details that would otherwise be lost
+    and has a low impact on performance, but fast-moving objects cause
+    one-frame ghosting. To enable temporal antialiasing, select the
+    \uicontrol {Temporal AA} check box.
+
+    Progressive antialiasing jiggles the camera after all the content of the
+    scene has stopped moving. The more frames you accumulate, the better the
+    result looks. This provides detailed static images with no performance cost,
+    but does not take effect if any visual changes are occurring.
+
+    To apply progressive antialiasing, set the number of frames to use for the
+    final image in the \uicontrol {Progressive AA} field. Note that at the
+    value of 8x, progressive antialiasing takes one eighth of a second to finish
+    rendering at 60 FTPS, which may be noticeable.
+
+    Multisample antialiasing results in smoother silhouettes, but has no effect
+    on the materials inside geometry. It provides good results on geometry
+    silhouettes, where aliasing is often most noticeable and works smoothly with
+    fast animation. However, it can be expensive to use and does not help with
+    texture or reflection issues.
+
+    To apply multisample antialiasing, set the number of samples to use per
+    pixel in the \uicontrol {Multisample AA} field.
+
+    \section1 Clearing the Scene Background
+
+    To clear the background of the scene to be transparent, select
+    \uicontrol Transparent in the \uicontrol {Background mode} field.
+    To clear the background using a color, select \uicontrol Color,
+    and select the color in the \uicontrol {Clear Color} field.
+
+    To leave the scene uncleared, select \uicontrol {Unspecified}.
+
+    \section1 Blending Scene Colors
+
+    To determine how colors are blended, select a blend mode in the
+    \uicontrol {Blend mode} field. For more information on the options,
+    see \uicontrol {Blending Colors}.
+
+    \section1 Performing Depth Tests
+
+    You can perform depth tests to optimize the scene environment. To skip depth
+    tests, deselect the \uicontrol {Enable depth test} checkbox. Note that
+    skipping the tests can cause rendering errors.
+
+    To have the renderer write to the depth buffer as part of the color pass,
+    deselect the \uicontrol {Enable depth prepass} checkbox. Disable depth
+    prepass on GPU's that use a tiled rendering architecture.
+
+    \section1 Ambient Occlusion
+
+    Ambient occlusion is a form of approximated global illumination that causes
+    non-directional self-shadowing where objects are close together.
+
+    You can set the strength of the shadows in the \uicontrol {AO strength}
+    field. A value of 100 causes full darkness shadows, while lower values
+    cause the shadowing to appear lighter. A value of 0 disables ambient
+    occlusion entirely, improving performance at a cost to the visual realism
+    of 3D objects rendered in the scene. All values other than 0 have the same
+    impact on performance.
+
+    To specify roughly how far ambient occlusion shadows spread away from
+    objects, select the distance in \uicontrol {AO distance} field. Greater
+    distances cause increasing impact to performance.
+
+    To prevent components from exhibiting ambient occlusion at close distances,
+    set the cutoff distance in the \uicontrol {AO bias} field. The higher the
+    value, the greater the distance that is required between objects before
+    ambient occlusion occurs.
+
+    \note If you see ambient occlusion shadowing on objects where there should
+    be no shadowing, increase the value slightly to clip away close results.
+
+    To specify how smooth the edges of the ambient occlusion shading are, set
+    the softness in the \uicontrol {AO softness} field. To improve smoothness at
+    the risk of sometimes producing obvious patterned artifacts, you can scatter
+    the edges of the ambient occlusion shadow bands by selecting the
+    \uicontrol {AO dither} check box.
+
+    To specify the ambient occlusion quality, at the expense of performance,
+    select the number of shades of gray to use in the
+    \uicontrol {AO sample rate} field.
+
+    \note Large distances between the clipping planes of your camera may cause
+    problems with ambient occlusion. If you are seeing odd banding in ambient
+    occlusion, try adjusting the value in the \uicontrol {Clip far} field in
+    the \l{Using Scene Camera}{scene camera} properties.
+
+    \section1 Using Image-based Lighting
+
+    In the material properties, you can specify an image (preferably
+    a high-dynamic range image) to use to light the scene, either
+    instead of or in addition to \l{Using Lights}{scene lights}. In the
+    \uicontrol {Probe brightness} field, you can modify the amount of
+    light emitted by the light probe.
+
+    To take shortcuts to approximate the light contributes of the light
+    probe at the expense of quality, select the \uicontrol {Fast IBL}
+    check box.
+
+    To add darkness (black) to the bottom half of the environment, force
+    the lighting to come predominantly from the top of the image, and
+    remove specific reflections from the lower half, increase the value
+    of the \uicontrol {Probe horizon} field.
+
+    To specify the image source field of view when using a camera source as
+    the light probe, set the angle in the \uicontrol {Probe FOV} field.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc
new file mode 100644
index 0000000000..6e3ba22275
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc
@@ -0,0 +1,111 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Design Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d-texture.html
+    \previouspage studio-3d-materials.html
+    \nextpage studio-3d-lights.html
+
+    \title Attaching Textures to Materials
+
+    You can use the Texture 3D QML type to attach textures to materials.
+    You specify an image and how it is mapped to meshes in a 3D scene.
+
+    \section1 Selecting the Mapping Method
+
+    To specify the method of mapping to use when sampling a texture, select
+    \uicontrol UV, \uicontrol Environment, or \uicontrol LightProbe in the
+    \uicontrol {Texture mapping} field.
+
+    UV mapping is the process of projecting 2D images to the surface of a
+    3D model for texture mapping. The letters \e U and \e V denote the axes
+    of the 2D texture, because x, y, and z are already used to denote the
+    axes of the 3D object in the model space. You can paint the polygons that
+    make up a 3D object with color and other surface attributes from a UV
+    texture map. Pixels in the image are assigned to surface mappings on the
+    polygon. Usually this is done by programmatically copying a triangular
+    piece of the image map and pasting it onto a triangle on the object.
+
+    UV mapping is used by default for diffuse and opacity maps. It sticks the
+    image to the mesh, so that a particular same portion of the image always
+    appears on a particular vertex, unless you animate the UV properties.
+
+    Environment mapping is used by default for specular reflection. It
+    \e projects the image onto the material as though it is being reflected
+    from the material. Using Environmental mapping for diffuse maps provides a
+    mirror effect.
+
+    Light probe mapping is used by default for HDRI sphere maps of
+    light probes. For more information about light probes, see
+    \l {Using Highlights and Reflections}.
+
+    To use image data from a file, specify the path to the file in the
+    \uicontrol Source field. To use a 2D Qt Quick QML type as the source,
+    specify the type in the \uicontrol {Source item} field. The type is
+    rendered as an offscreen layer. If you specify the source item, any
+    image you might specify as a source is ignored.
+
+    \note Currently, there is no way to forward input events to the Item
+    used as a texture source.
+
+    \section1 UV Scaling
+
+    The \uicontrol {U scale} and \uicontrol {V scale} properties define how
+    to scale the U and V texture coordinates when mapping to a mesh's UV
+    coordinates.
+
+    Scaling the U value when using horizontal tiling specifies how many times
+    the texture is repeated from left to right, while scaling the V value when
+    using vertical tiling specifies the repetition from bottom to top.
+
+    To control how the texture is mapped when the U scaling value is greater
+    than 1, set the horizontal tiling mode in the \uicontrol {U tiling} field.
+    To control how the texture is mapped when the V scaling value is greater
+    than 1, set the vertical tiling mode in the \uicontrol {V tiling} field.
+
+    To specify that the texture is not tiled, but the value on the edge is used
+    instead, select \uicontrol ClampToEdge. To repeat the texture and mirrored
+    it over the x or y axis, select \uicontrol MirroredRepeat. To repeat the
+    texture over the x or y axis, select \uicontrol Repeat.
+
+    \section1 Setting UV Transform Properties
+
+    To offset the U coordinate mapping from left to right, set the position of
+    the component in the \uicontrol {U position} field. To offset the mapping
+    from bottom to top, set it in the \uicontrol {V position} field.
+
+    Specify the U and V pivot point in the \uicontrol {U pivot} and
+    \uicontrol {V pivot} fields.
+
+    To rotate the texture around the pivot point, specify rotation as degrees
+    in the \uicontrol {UV rotation} field. A positive value indicates clockwise
+    rotation.
+
+    For more information about rotating and pivoting components in the local
+    coordinate space, see \l {Setting Transform Properties}.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc
new file mode 100644
index 0000000000..4c61d12a12
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc
@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio}
+    \previouspage studio-3d-editor.html
+    \page studio-3d-view.html
+    \nextpage studio-3d-components.html
+
+    \title Adding 3D Views
+
+    To add a 3D view to the scene, drag and drop a \uicontrol {View 3D}
+    component from \uicontrol Library > \uicontrol {QML Types} >
+    \uicontrol {Qt Quick 3D} to the 3D editor or to the \uicontrol Navigator.
+    A 3D view contains a reference node that specifies a scene light, camera,
+    and model. A default material is attached to the model. You can attach
+    textures to materials.
+
+    By default, a directional light and a perspective camera are used.
+    To use other light and camera types, change the type of the component in
+    the \uicontrol Type field in the \uicontrol Properties view. For example,
+    to use a point light, enter \e {PointLight}.
+
+    \image studio-3d-properties-type.png "Type field in Properties view"
+
+    To edit component properties, select the component in the 3D editor
+    or in the \uicontrol Navigator and modify the property values in the
+    \uicontrol Properties view.
+
+    For more information about the available components and their properties,
+    see \l{Using 3D Components}.
+*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc
new file mode 100644
index 0000000000..0256759f85
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page studio-3d.html
+    \previouspage qmldesigner-pathview-editor.html
+    \nextpage studio-3d-design-mode.html
+
+    \title Editing 3D Scenes
+
+    You can use the 3D editor in the Design mode to edit files you created
+    using 3D graphics applications and stored in one of the supported formats.
+    You cannot create 3D models or other assets in the editor, but you can
+    \l{Importing 3D Assets}{import} the assets you need and work with them to
+    create scenes and states, as well as the transitions between them.
+
+    When you import 3D scenes from files that you exported from 3D graphics
+    tools, you also import the camera, light, model, and materials as 3D
+    components. If your scene did not contain them, you can add predefined
+    Qt Quick 3D components to it and edit their properties to fit your needs.
+
+    The following topics contain information about working with Qt Quick 3D:
+
+    \list
+        \li \l {Editing 3D Assets in Design Mode}
+
+            \QDS opens QML files that contain 3D scenes in the Design mode and
+            the scenes in the 3D editor. You can add imported 3D assets as
+            resources to projects as 3D components.
+        \li \l {Working in the 3D Editor}
+
+            You can select 3D components in the 3D editor to move, rotate, and
+            scale them in the scene projected by the camera.
+        \li \l{Adding 3D Views}
+
+            You can drag and drop 3D components from the \uicontrol Library
+            to the scene or to the \uicontrol Navigator. You must add all
+            3D components into a 3D view.
+        \li \l {Using 3D Components}
+
+            You can speficy properties for 3D components, such as cameras,
+            lights, materials, and shaders, in the \uicontrol Properties view.
+     \endlist
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc
new file mode 100644
index 0000000000..37af1be548
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-arc.qdoc
@@ -0,0 +1,350 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Arc
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits ShapePath
+    \ingroup qtquickstudio-components
+
+    \brief An arc that ends at the specified position and uses the specified
+    radius.
+
+    An arc is specified by setting values in degrees for the \l begin and
+    \l end properties. The arc can be just a line or a filled outline.
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify
+    the appearance of the line or outline. The \l dashPattern and \l dashOffset
+    properties specify the appearance of dashed lines.
+
+    The area between the arc's start and end points or the area inside the
+    outline are painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the
+    \l ShapeGradient subtypes and set using the \l gradient property.
+    If both a color and a gradient are specified, the gradient is used.
+
+    To create an arc with an outline, set the \l outlineArc property to \c true.
+    The \l arcWidth property specifies the width of the arc outline, including
+    the stroke. The \l arcWidthBegin and \l arcWidthEnd properties can be used
+    to specify the width of the start and end points of the outline separately.
+    The width of the outline between the start and end points is calculated
+    automatically. The inner and outer curves or the outline can be adjusted by
+    specifying values for the \l radiusInnerAdjust and \l radiusOuterAdjust
+    properties.
+
+    The \l round, \l roundBegin, and \l roundEnd properties specify whether the
+    end points of the arc outline have rounded caps. For an arc that does not
+    have an outline, the \l capStyle property specifies whether the line ends
+    are square or rounded.
+
+    Because an arc has curves, it may be appropriate to set the \l antialiasing
+    property to improve its appearance.
+
+    \section2 Example Usage
+
+    You can use the Arc component in \QDS to create different kinds of arcs.
+
+    \image studio-arc.png
+
+    The QML code looks as follows:
+
+    \code
+    ArcItem {
+        id: arc
+        x: 31
+        y: 31
+        capStyle: 32
+        end: 180
+        strokeWidth: 6
+        strokeColor: "#000000"
+    }
+
+    ArcItem {
+        id: arcOutline
+        strokeColor: "gray"
+        arcWidth: 13
+        end: 180
+        fillColor: "light gray"
+        antialiasing: true
+        round: true
+        outlineArc: true
+    }
+
+    ArcItem {
+        id: circle
+        end: 360
+        strokeWidth: 5
+        strokeColor: "#000000"
+    }
+
+    ArcItem {
+        id: circleOutline
+        outlineArc: true
+        round: true
+        strokeColor: "gray"
+        fillColor: "light gray"
+        strokeWidth: 1
+        end: 360
+    }
+    \endcode
+*/
+
+/*!
+    \qmlproperty enumeration Arc::capStyle
+
+    The cap style of the line if the arc does not have an outline.
+
+    \value ShapePath.FlatCap
+           A square line end that does not cover the end point of the line.
+    \value ShapePath.SquareCap
+           A square line end that covers the end point and extends beyond it
+           by half the line width. This is the default value.
+    \value ShapePath.RoundCap
+           A rounded line end.
+
+    \sa round, roundBegin, roundEnd, Qt::PenCapStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Arc::dashOffset
+
+    The starting point of the dash pattern for the arc or arc outline.
+
+    The offset is measured in terms of the units used to specify the dash
+    pattern. For example, a pattern where each stroke is four units long,
+    followed by a gap of two units, will begin with the stroke when drawn
+    as a line. However, if the dash offset is set to 4.0, any line drawn
+    will begin with the gap. Values of the offset up to 4.0 will cause part
+    of the stroke to be drawn first, and values of the offset between 4.0 and
+    6.0 will cause the line to begin with part of the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+
+/*!
+    \qmlproperty ShapePath Arc::dashPattern
+
+    The dash pattern of the arc or arc outline specified as the dashes and the
+    gaps between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash
+    with the length 5 and width 10 is 50 pixels long.
+
+    Each dash is also subject to cap styles, and therefore a dash of 1 with
+    square cap set will extend 0.5 pixels out in each direction resulting in
+    a total width of 2.
+
+    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+    line end covers the end point and extends beyond it by half the line width.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+    followed by a space of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+
+/*!
+    \qmlproperty ShapePath Arc::fillColor
+
+    The arc fill color.
+
+    If the arc is just a line, the area between its \l begin and \l end
+    points is filled.
+
+    If the arc has an outline, the area within the outline is filled.
+
+    A gradient for the fill can be specified by using \l gradient. If both a
+    color and a gradient are specified, the gradient is used.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+*/
+
+/*!
+    \qmlproperty ShapePath Arc::gradient
+
+    The gradient of the arc fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the
+    fill uses a solid color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the
+    \l ShapeGradient subtypes.
+
+    \note The \l Gradient type cannot be used here. Rather, prefer using one of
+    the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+    \qmlproperty ShapePath Arc::strokeColor
+
+    The color of the arc line or outline.
+
+    When set to \c transparent, no line is drawn.
+
+    The default value is \c white.
+
+    \sa QColor
+*/
+
+/*!
+    \qmlproperty enumeration Arc::strokeStyle
+
+    The style of the arc line or outline.
+
+    \value ShapePath.SolidLine
+           A solid line. This is the default value.
+    \value ShapePath.DashLine
+           Dashes separated by a few pixels.
+           The \l dashPattern property specifies the dash pattern.
+
+    \sa Qt::PenStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Arc::strokeWidth
+
+    The width of the arc line or outline.
+
+    When set to a negative value, no line is drawn.
+
+    The default value is 1.
+
+    The total width of an arc that has an outline (that is, the outline and the
+    fill) is specified by \l arcWidth.
+*/
+
+/*!
+    \qmlproperty real Arc::begin
+
+    The position in degrees where the arc begins.
+
+    The default value is 0.
+
+    To create a circle, set the value of this property to 0 and the value of the
+    \l end property to 360.
+*/
+
+/*!
+    \qmlproperty real Arc::end
+
+    The position in degrees where the arc ends.
+
+    To create a circle, set the value of this property to 360 and the value of
+    the \l begin property to 0.
+*/
+
+/*!
+    \qmlproperty real Arc::arcWidth
+
+    The total width of an arc that has an outline, including the outline and
+    fill.
+
+    \sa arcWidthBegin, arcWidthEnd, strokeWidth
+*/
+
+/*!
+    \qmlproperty real Arc::arcWidthBegin
+
+    The width of the beginning of an arc outline.
+
+    \sa arcWidthEnd, arcWidth
+*/
+
+/*!
+    \qmlproperty real Arc::arcWidthEnd
+
+    The width of the end of an arc outline.
+
+   \sa arcWidthBegin, arcWidth
+*/
+
+/*!
+    \qmlproperty real Arc::radiusInnerAdjust
+
+    The radius of the inside edge of the arc outline.
+
+    This property can be used to adjust the inner curve of the arc outline.
+*/
+
+/*!
+    \qmlproperty real Arc::radiusOuterAdjust
+
+    The radius of the outside edge of the arc outline.
+
+    This property can be used to adjust the outer curve of the arc outline.
+*/
+
+/*!
+    \qmlproperty real Arc::alpha
+
+    The area between the \l begin and \l end points of the arc.
+*/
+
+/*!
+    \qmlproperty bool Arc::antialiasing
+
+    Whether the arc should be antialiased.
+
+    Antialiasing might require more memory and slow down drawing the type.
+*/
+
+/*!
+    \qmlproperty bool Arc::outlineArc
+
+    Whether the arc has an outline.
+
+    \sa arcWidth, arcWidthBegin, arcWidthEnd, round, roundBegin, roundEnd,
+
+*/
+
+/*!
+    \qmlproperty bool Arc::round
+
+    Whether the arc outline end points have round caps.
+
+    The \l roundBegin and \l roundEnd properties can be used to specify the
+    caps separately for the end points.
+
+*/
+
+/*!
+    \qmlproperty bool Arc::roundBegin
+
+    Whether the arc outline begins with a round cap.
+
+    \sa Qt::PenCapStyle, round, roundEnd
+*/
+
+/*!
+    \qmlproperty bool Arc::roundEnd
+
+    Whether the arc outline ends with a round cap.
+
+    \sa Qt::PenCapStyle, round, roundBegin
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc
new file mode 100644
index 0000000000..0f00044dd1
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-border.qdoc
@@ -0,0 +1,315 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Border
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits ShapePath
+    \ingroup qtquickstudio-components
+
+    \brief A border drawn in four segments: left, top right, and bottom.
+
+    The Border type is used to create borders out of four segments: left,
+    top, right, and bottom. The \l drawLeft, \l drawTop, \l drawRight, and
+    \l drawBottom properties can be used to determine whether each of the
+    segments is visible.
+
+    The \l borderMode property determines whether the border is drawn along
+    the inside or outside edge of the item, or on top of the edge.
+
+    The \l radius property specifies whether the border corners are rounded.
+    The radius can also be specified separately for each corner. Because this
+    introduces curved edges to the corners, it may be appropriate to set the
+    \l antialiasing property to improve the appearance of the border.
+
+    The \l joinStyle property specifies how to connect two border line segments.
+
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify
+    the appearance of the border line. The \l dashPattern and \l dashOffset
+    properties specify the appearance of dashed lines.
+
+    The \l capStyle property specifies whether line ends are square or
+    rounded.
+
+    \section2 Example Usage
+
+    You can use the Border component in \QDS to create different kinds of
+    borders.
+
+    \image studio-border.png
+
+    The QML code looks as follows:
+
+    \code
+    BorderItem {
+        id: openLeft
+        width: 99
+        height: 99
+        antialiasing: true
+        drawLeft: false
+        strokeColor: "gray"
+    }
+
+    BorderItem {
+        id: openTop
+        width: 99
+        height: 99
+        antialiasing: true
+        strokeColor: "#808080"
+        drawTop: false
+    }
+
+    BorderItem {
+        id: asymmetricalCorners
+        width: 99
+        height: 99
+        antialiasing: true
+        bottomLeftRadius: 0
+        topRightRadius: 0
+        strokeColor: "#808080"
+    }
+
+    BorderItem {
+        id: dashedBorder
+        width: 99
+        height: 99
+        antialiasing: true
+        strokeStyle: 4
+        strokeColor: "#808080"
+    }
+    \endcode
+*/
+
+/*!
+    \qmlproperty int Border::radius
+
+    The radius used to draw rounded corners.
+
+    If radius is non-zero, the corners will be rounded, otherwise they will
+    be sharp. The radius can also be specified separately for each corner by
+    using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and
+    \l topRightRadius properties.
+*/
+
+/*!
+    \qmlproperty int Border::bottomLeftRadius
+
+    The radius of the bottom left border corner.
+
+    \sa radius
+*/
+
+/*!
+    \qmlproperty int Border::bottomRightRadius
+
+    The radius of the bottom right border corner.
+
+    \sa radius
+*/
+
+/*!
+    \qmlproperty int Border::topLeftRadius
+
+    The radius of the top left border corner.
+
+    \sa radius
+*/
+
+/*!
+    \qmlproperty int Border::topRightRadius
+
+    The radius of the top right border corner.
+
+    \sa radius
+*/
+
+/*!
+    \qmlproperty enumeration Border::capStyle
+
+    The cap style of the line.
+
+    \value ShapePath.FlatCap
+           A square line end that does not cover the end point of the line.
+    \value ShapePath.SquareCap
+           A square line end that covers the end point and extends beyond it
+           by half the line width. This is the default value.
+    \value ShapePath.RoundCap
+           A rounded line end.
+
+    \sa Qt::PenCapStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Border::dashOffset
+
+    The starting point of the dash pattern for the border line.
+
+    The offset is measured in terms of the units used to specify the dash
+    pattern. For example, a pattern where each stroke is four units long,
+    followed by a gap of two units, will begin with the stroke when drawn
+    as a line. However, if the dash offset is set to 4.0, any line drawn
+    will begin with the gap. Values of the offset up to 4.0 will cause part
+    of the stroke to be drawn first, and values of the offset between 4.0 and
+    6.0 will cause the line to begin with part of the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+
+/*!
+    \qmlproperty ShapePath Border::dashPattern
+
+    The dash pattern of the border line specified as the dashes and the gaps
+    between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash
+    with the length 5 and width 10 is 50 pixels long.
+
+    Each dash is also subject to cap styles, and therefore a dash of 1 with
+    square cap set will extend 0.5 pixels out in each direction resulting in
+    a total width of 2.
+
+    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+    line end covers the end point and extends beyond it by half the line width.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+    followed by a space of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+
+/*!
+    \qmlproperty enumeration Border::joinStyle
+
+    The join style used to connect two border line segments.
+
+    \value ShapePath.MiterJoin
+           The outer edges of the lines are extended to meet at an angle, and
+           this area is filled.
+    \value ShapePath.BevelJoin
+           The triangular notch between the two lines is filled.
+           This is the default value.
+    \value ShapePath.RoundJoin
+           A circular arc between the two lines is filled.
+
+    \sa Qt::PenJoinStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Border::strokeColor
+
+    The color of the border line.
+
+    When set to \c transparent, no line is drawn.
+
+    The default value is \c white.
+
+    \sa QColor
+*/
+
+/*!
+    \qmlproperty enumeration Border::strokeStyle
+
+    The style of the border line.
+
+    \value ShapePath.SolidLine
+           A solid line. This is the default value.
+    \value ShapePath.DashLine
+           Dashes separated by a few pixels.
+           The \l dashPattern property specifies the dash pattern.
+
+    \sa Qt::PenStyle
+*/
+
+/*!
+    \qmlproperty  ShapePath Border::strokeWidth
+
+    The width of the border line.
+
+    When set to a negative value, no line is drawn.
+
+    The default value is 1.
+*/
+
+/*!
+    \qmlproperty bool Border::drawBottom
+
+    Whether the bottom border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+    \qmlproperty bool Border::drawLeft
+
+    Whether the left border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+    \qmlproperty bool Border::drawRight
+
+    Whether the right border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+    \qmlproperty bool Border::drawTop
+
+    Whether the top border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+
+/*!
+    \qmlproperty bool Border::antialiasing
+
+    Whether the border should be antialiased.
+
+    Antialiasing might require more memory and slow down drawing the type.
+*/
+
+/*!
+    \qmlproperty enumeration Border::borderMode
+
+    Where the border is drawn.
+
+    \value Border.Inside
+           The border is drawn along the inside edge of the item and does not
+           affect the item width.
+           This is the default value.
+    \value Border.Middle
+           The border is drawn over the edge of the item and does not
+           affect the item width.
+    \value Border.Outside
+           The border is drawn along the outside edge of the item and increases
+           the item width by the value of \l strokeWidth.
+
+    \sa strokeWidth
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc
new file mode 100644
index 0000000000..92fcb6ba14
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-flipable.qdoc
@@ -0,0 +1,125 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Flipable
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \ingroup qtquickstudio-components
+
+    \brief Provides a surface that can be flipped.
+
+    A Flipable type can be visibly \e flipped between its front and back sides,
+    like a card. The front and back sides are specified by using any two types
+    inside the Flipable type. The type with the higher z-order is the front
+    side. The \l opacityFront and \l opacityBack properties are used to hide
+    and show either the front or back side of the flipable item at a time.
+
+    The \l flipAngle property is used to animate the angle of the type to
+    produce the flipping effect. The \l xAxis or \l yAxis property is set
+    to 1 to determine which axis the type is rotated around.
+
+    \section2 Example Usage
+
+    You can use the Flipable component in \QDS to create a flipable item. In
+    this example, the two sides of the flipable show ISO 7000 icons.
+
+    \image studio-flipable.png
+
+    The QML code looks as follows:
+
+    \code
+    FlipableItem {
+        id: flipable
+        width: 90
+        height: 89
+        opacityBack: 0
+
+        IsoItem {
+            id: arrowIsoIcon
+            color: "#808080"
+            anchors.fill: parent
+            source: "./iso-icons/iso_grs_7000_4_0251.dat"
+        }
+
+        IsoItem {
+            id: questionIsoIcon
+            color: "#808080"
+            anchors.fill: parent
+            source: "./iso-icons/iso_grs_7000_4_0435.dat"
+        }
+    }
+    \endcode
+*/
+
+/*!
+    \qmlproperty Rotation Flipable::flipAngle
+
+    The flip angle in degrees.
+
+    The minimum value is -360 and the maximum value is 360 degrees.
+*/
+
+/*!
+    \qmlproperty real Flipable::opacityBack
+
+    The opacity of the back side of the flipable type.
+
+    The opacity can be set between 0 and 1 to hide or show the items on the
+    back side of the flipable type.
+*/
+
+/*!
+    \qmlproperty real Flipable::opacityFront
+
+    The opacity of the front side of the flipable type.
+
+    The opacity can be set between 0 and 1 to hide or show the items on the
+    front side of the flipable type.
+*/
+
+/*!
+    \qmlproperty int Flipable::xAxis
+
+    Whether the type is rotated around the x-axis.
+
+    This property is set to 1 to rotate the flipable type around the x-axis.
+*/
+
+/*!
+    \qmlproperty int Flipable::yAxis
+
+    Whether the type is rotated around the y-axis.
+
+    This property is set to 1 to rotate the flipable type around the y-axis.
+*/
+
+/*!
+    \qmlproperty bool Flipable::flipped
+
+    Whether the flipable type has been flipped.
+
+    This property is set to \c true when the type is flipped.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc
new file mode 100644
index 0000000000..cca7a56eb8
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-group.qdoc
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Group
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Item
+    \ingroup qtquickstudio-components
+
+    \brief A group item that gets its size from its children.
+
+    The Group type is an \l Item type extended with the size property. The value
+    of size is automatically calculated to fit the children of the group.
+
+    \section2 Example Usage
+
+    You can use the Group type to specify the size of one or several items.
+
+    \image studio-group.png
+
+    The QML code looks as follows:
+
+    \code
+    GroupItem {
+        id: group
+
+        Rectangle {
+        id: rectangle
+        width: 200
+        height: 200
+        color: "#c2c2c2"
+        }
+
+        Rectangle {
+        id: rectangle1
+        x: 140
+        y: 140
+        width: 200
+        height: 200
+        color: "#000000"
+        }
+    }
+    \endcode
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc
new file mode 100644
index 0000000000..6fb8ed4feb
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-iso.qdoc
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Iso
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits ShapePath
+    \ingroup qtquickstudio-components
+
+    \brief An ISO 7000 icon.
+
+    The Iso type specifies an icon from an ISO 7000 icon library as a
+    \l [QtQuickExtras] {Picture}
+    type. The icon to use for the type and its color can be specified.
+
+    \section2 Example Usage
+
+    You can use the Iso type in \QDS to add ISO 7000 icons.
+
+    \image studio-flipable.png
+
+    The QML code looks as follows:
+
+    \code
+    IsoItem {
+        id: arrowIsoIcon
+        color: "#808080"
+        anchors.fill: parent
+        source: "./iso-icons/iso_grs_7000_4_0251.dat"
+    }
+    \endcode
+
+    To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select
+    the ISO icon in the \uicontrol Navigator or on the canvas, and then
+    select \uicontrol {Choose Icon} in the context menu.
+
+    \image iso-icon-browser.png
+*/
+
+/*!
+    \qmlproperty color Iso::iconColor
+
+    The color of an ISO 7000 icon.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc
new file mode 100644
index 0000000000..e09e6038f2
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-pie.qdoc
@@ -0,0 +1,254 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Pie
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits ShapePath
+    \ingroup qtquickstudio-components
+
+    \brief A pie.
+
+    The Pie type is used to create a pie slice, a pie that is missing slices,
+    or just the pie rind (similar to an \l Arc), depending on the \l begin and
+    \l end property values and the \l hideLine value.
+
+    The filling of the pie is painted using either a solid fill color, specified
+    using the \l fillColor property, or a gradient, defined using one of the
+    \l ShapeGradient subtypes and set using the \l gradient property.
+    If both a color and a gradient are specified, the gradient is used.
+
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify
+    the appearance of the pie outline. The \l dashPattern and \l dashOffset
+    properties specify the appearance of dashed lines.
+
+    The \l capStyle property specifies whether line ends are square or
+    rounded.
+
+    Because a pie has curved edges, it may be appropriate to set the
+    \l antialiasing property to improve its appearance.
+
+    \section2 Example Usage
+
+    You can use the Pie component in \QDS to create different kinds of pies.
+
+    \image studio-pie.png
+
+    The QML code looks as follows:
+
+    \code
+        PieItem {
+        id: pieSlice
+        antialiasing: true
+        strokeColor: "gray"
+        fillColor: "light gray"
+    }
+
+    PieItem {
+        id: pie
+        end: 300
+        fillColor: "#d3d3d3"
+        strokeColor: "#808080"
+        antialiasing: true
+    }
+
+    PieItem {
+        id: pieRind
+        strokeWidth: 4
+        capStyle: 32
+        hideLine: true
+        end: 300
+        strokeColor: "#808080"
+        antialiasing: true
+    }
+    \endcode
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::capStyle
+
+    The cap style of the line.
+
+    \value ShapePath.FlatCap
+           A square line end that does not cover the end point of the line.
+    \value ShapePath.SquareCap
+           A square line end that covers the end point and extends beyond it
+           by half the line width. This is the default value.
+    \value ShapePath.RoundCap
+           A rounded line end.
+
+    \sa Qt::PenCapStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::dashOffset
+
+    The starting point of the dash pattern for the line.
+
+    The offset is measured in terms of the units used to specify the dash
+    pattern. For example, a pattern where each stroke is four units long,
+    followed by a gap of two units, will begin with the stroke when drawn
+    as a line. However, if the dash offset is set to 4.0, any line drawn
+    will begin with the gap. Values of the offset up to 4.0 will cause part
+    of the stroke to be drawn first, and values of the offset between 4.0 and
+    6.0 will cause the line to begin with part of the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::dashPattern
+
+    The dash pattern of the line specified as the dashes and the gaps between
+    them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash
+    with the length 5 and width 10 is 50 pixels long.
+
+    Each dash is also subject to cap styles, and therefore a dash of 1 with
+    square cap set will extend 0.5 pixels out in each direction resulting in
+    a total width of 2.
+
+    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+    line end covers the end point and extends beyond it by half the line width.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+    followed by a space of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::fillColor
+
+    The pie fill color.
+
+    If \l hideLine is \c false, a pie slice is drawn using the values of the
+    \l begin and \l end properties and filled with this color.
+
+    If \l hideLine is \c true, just the pie rind is drawn and the area between
+    the \l begin and \l end points is filled.
+
+    A gradient for the fill can be specified by using \l gradient. If both a
+    color and a gradient are specified, the gradient is used.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::gradient
+
+    The gradient of the pie fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the
+    fill uses a solid color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the
+    \l ShapeGradient subtypes.
+
+    \note The \l Gradient type cannot be used here. Rather, prefer using one of
+    the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::strokeColor
+
+    The color of the line.
+
+    When set to \c transparent, no line is drawn.
+
+    The default value is \c white.
+
+    \sa QColor
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::strokeStyle
+
+    The style of the border line.
+
+    \value ShapePath.SolidLine
+           A solid line. This is the default value.
+    \value ShapePath.DashLine
+           Dashes separated by a few pixels.
+           The \l dashPattern property specifies the dash pattern.
+
+    \sa Qt::PenStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Pie::strokeWidth
+
+    The width of the line.
+
+    When set to a negative value, no line is drawn.
+
+    The default value is 1.
+*/
+
+/*!
+    \qmlproperty real Pie::begin
+
+    The position in degrees where the pie begins.
+
+    The default value is 0.
+
+    To create a circle, set the value of this property to 0 and the value of the
+    \l end property to 360.
+*/
+
+/*!
+    \qmlproperty real Pie::end
+
+    The position in degrees where the pie ends.
+
+    To create a circle, set the value of this property to 360 and the value of
+    the \l begin property to 0.
+*/
+
+/*!
+    \qmlproperty real Pie::alpha
+
+    The area between \l begin and \l end.
+*/
+
+/*!
+    \qmlproperty bool Pie::antialiasing
+
+    Whether the pie should be antialiased.
+
+    Antialiasing might require more memory and slow down drawing the type.
+*/
+
+/*!
+    \qmlproperty bool Pie::hideLine
+
+    Whether to draw a pie slice or just the pie rind (similar to an \l Arc).
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc
new file mode 100644
index 0000000000..dc792addb4
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-rectangle.qdoc
@@ -0,0 +1,283 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Rectangle
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits ShapePath
+    \ingroup qtquickstudio-components
+
+    \brief A filled rectangle with an optional border.
+
+    Rectangle items are used to fill areas with solid color or gradients and
+    to provide a rectangular border.
+
+    Each Rectangle item is painted using either a solid fill color, specified
+    using the \l fillColor property, or a gradient, defined using one of the
+    \l ShapeGradient subtypes and set using the \l gradient property.
+    If both a color and a gradient are specified, the gradient is used.
+
+    An optional border can be added to a rectangle with its own color and
+    thickness by setting the \l strokeColor and \l strokeWidth properties.
+    Setting the color to \c transparent creates a border without a fill color.
+
+    Rounded rectangles can be drawn using the \l radius property. The radius
+    can also be specified separately for each corner. Because this introduces
+    curved edges to the corners of a rectangle, it may be appropriate to set
+    the \l antialiasing property to improve the appearance of the rectangle.
+
+    \section2 Example Usage
+
+    You can use the Rectangle component in \QDS to create different kinds of
+    rectangles.
+
+    \image studio-rectangle.png
+
+    The QML code looks as follows:
+
+    \code
+    RectangleItem {
+        id: rectangle
+        gradient: RadialGradient {
+            focalRadius: 0
+            centerY: 38.5
+            focalY: 38.5
+            centerX: 51.5
+            centerRadius: 38.5
+            GradientStop {
+                position: 0
+                color: "#ffffff"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#000000"
+            }
+            focalX: 51.5
+        }
+        bottomRightRadius: 0
+        topLeftRadius: 0
+        strokeColor: "gray"
+    }
+
+    RectangleItem {
+        id: rectangle1
+        gradient: LinearGradient {
+            y1: 0
+            y2: 77
+            x2: 103
+            x1: 0
+            GradientStop {
+                position: 0
+                color: "#ffffff"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#000000"
+            }
+        }
+        topRightRadius: 0
+        bottomLeftRadius: 0
+        strokeColor: "#808080"
+    }
+
+    RectangleItem {
+        id: rectangle2
+        topLeftRadius: 0
+        bottomRightRadius: 0
+        fillColor: "#d3d3d3"
+        strokeColor: "#808080"
+    }
+
+    RectangleItem {
+        id: rectangle3
+        fillColor: "#000000"
+        gradient: LinearGradient {
+            y1: 0
+            y2: 77
+            x2: 103
+            x1: 0
+            GradientStop {
+                position: 0
+                color: "#000000"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#fdf9f9"
+            }
+        }
+        topRightRadius: 0
+        bottomLeftRadius: 0
+        strokeColor: "#808080"
+    }
+    \endcode
+*/
+
+/*!
+    \qmlproperty int Rectangle::radius
+
+    The radius used to draw rounded corners.
+
+    If radius is non-zero, the corners will be rounded, otherwise they will
+    be sharp. The radius can also be specified separately for each corner by
+    using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and
+    \l topRightRadius properties.
+*/
+
+/*!
+    \qmlproperty int Rectangle::bottomLeftRadius
+
+    The radius of the bottom left rectangle corner.
+*/
+
+/*!
+    \qmlproperty int Rectangle::bottomRightRadius
+
+    The radius of the bottom right rectangle corner.
+*/
+
+/*!
+    \qmlproperty int Rectangle::topLeftRadius
+
+    The radius of the top left rectangle corner.
+*/
+
+/*!
+    \qmlproperty int Rectangle::topRightRadius
+
+    The radius of the top right rectangle corner.
+*/
+
+/*!
+    \qmlproperty ShapePath Rectangle::dashOffset
+
+    The starting point of the dash pattern for the rectangle border.
+
+    The offset is measured in terms of the units used to specify the dash
+    pattern. For example, a pattern where each stroke is four units long,
+    followed by a gap of two units, will begin with the stroke when drawn
+    as a line. However, if the dash offset is set to 4.0, any line drawn
+    will begin with the gap. Values of the offset up to 4.0 will cause part
+    of the stroke to be drawn first, and values of the offset between 4.0 and
+    6.0 will cause the line to begin with part of the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+
+/*!
+    \qmlproperty ShapePath Rectangle::dashPattern
+
+    The dash pattern of the rectangle border specified as the dashes and the
+    gaps between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash
+    with the length 5 and width 10 is 50 pixels long.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+    followed by a space of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+
+/*!
+    \qmlproperty ShapePath Rectangle::fillColor
+
+    The rectangle fill color.
+
+    A gradient for the fill can be specified by using \l gradient. If both a
+    color and a gradient are specified, the gradient is used.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+*/
+
+/*!
+    \qmlproperty ShapePath Rectangle::gradient
+
+    The gradient of the rectangle fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the
+    fill uses a solid color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the
+    \l ShapeGradient subtypes.
+
+    \note The \l Gradient type cannot be used here. Rather, prefer using one of
+    the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+    \qmlproperty ShapePath Rectangle::strokeColor
+
+    The color used to draw the border of the rectangle.
+
+    When set to \c transparent, no line is drawn.
+
+    The default value is \c white.
+
+    \sa QColor
+*/
+
+/*!
+    \qmlproperty ShapePath Rectangle::strokeStyle
+
+    The style of the rectangle border.
+
+    \value ShapePath.SolidLine
+           A solid line. This is the default value.
+    \value ShapePath.DashLine
+           Dashes separated by a few pixels.
+           The \l dashPattern property specifies the dash pattern.
+
+    \sa Qt::PenStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Rectangle::strokeWidth
+
+    The width of the border of the rectangle.
+
+    A width of 1 creates a thin line. For no line, use a negative value or a
+    transparent color.
+
+    \note The width of the rectangle's border does not affect the geometry of
+    the rectangle itself or its position relative to other items if anchors are
+    used.
+
+    The border is rendered within the rectangle's boundaries.
+*/
+
+/*!
+    \qmlproperty bool Rectangle::antialiasing
+
+    Whether the Rectangle should be antialiased. Antialiasing might
+    require more memory and slow down drawing the type.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc
new file mode 100644
index 0000000000..3a460382b2
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-svgPath.qdoc
@@ -0,0 +1,212 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype SvgPath
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits ShapePath
+    \ingroup qtquickstudio-components
+
+    \brief A path defined using an SVG path data string.
+
+    The SvgPath type uses an SVG path data string to draw a path as a line.
+
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify
+    the appearance of the path. The \l dashPattern and \l dashOffset properties
+    specify the appearance of dashed lines.
+
+    The \l capStyle property specifies whether line ends are square or
+    rounded.
+
+    The \l joinStyle property specifies how to connect two path segments.
+    If the path segments enclose areas, they can be painted using either
+    a solid fill color, specified using the \l fillColor property, or a
+    gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are
+    specified, the gradient is used.
+
+    If the path has curves, it may be appropriate to set the \l antialiasing
+    property to improve its appearance.
+
+    \note Mixing SvgPath with other types of elements is not always supported.
+    For example, when \l Shape is backed by \c GL_NV_path_rendering, a
+    \l ShapePath can contain one or more SvgPath elements, or one or more
+    elements of other types, but not both.
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::capStyle
+
+    The cap style of the line.
+
+    \value ShapePath.FlatCap
+           A square line end that does not cover the end point of the line.
+    \value ShapePath.SquareCap
+           A square line end that covers the end point and extends beyond it
+           by half the line width. This is the default value.
+    \value ShapePath.RoundCap
+           A rounded line end.
+
+    \sa Qt::PenCapStyle
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::dashOffset
+
+    The starting point of the dash pattern for the line.
+
+    The offset is measured in terms of the units used to specify the dash
+    pattern. For example, a pattern where each stroke is four units long,
+    followed by a gap of two units, will begin with the stroke when drawn
+    as a line. However, if the dash offset is set to 4.0, any line drawn
+    will begin with the gap. Values of the offset up to 4.0 will cause part
+    of the stroke to be drawn first, and values of the offset between 4.0 and
+    6.0 will cause the line to begin with part of the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::dashPattern
+
+    The dash pattern of the line specified as the dashes and the gaps between
+    them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash
+    with the length 5 and width 10 is 50 pixels long.
+
+    Each dash is also subject to cap styles, and therefore a dash of 1 with
+    square cap set will extend 0.5 pixels out in each direction resulting in
+    a total width of 2.
+
+    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
+    line end covers the end point and extends beyond it by half the line width.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+    followed by a space of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::fillColor
+
+    The fill color of enclosed path segments.
+
+    A gradient for the fill can be specified by using \l gradient. If both a
+    color and a gradient are specified, the gradient is used.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::gradient
+
+    The gradient of the fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the
+    fill uses a solid color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the
+    \l ShapeGradient subtypes.
+
+    \note The \l Gradient type cannot be used here. Rather, prefer using one of
+    the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::joinStyle
+
+    The join style used to connect two path segments.
+
+    \value ShapePath.MiterJoin
+           The outer edges of the lines are extended to meet at an angle, and
+           this area is filled.
+    \value ShapePath.BevelJoin
+           The triangular notch between the two lines is filled.
+           This is the default value.
+    \value ShapePath.RoundJoin
+           A circular arc between the two lines is filled.
+
+    \sa Qt::PenJoinStyle
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::strokeColor
+
+    The color of the line.
+
+    When set to \c transparent, no line is drawn.
+
+    The default value is \c white.
+
+    \sa QColor
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::strokeStyle
+
+    The style of the line.
+
+    \value ShapePath.SolidLine
+           A solid line. This is the default value.
+    \value ShapePath.DashLine
+           Dashes separated by a few pixels.
+           The \l dashPattern property specifies the dash pattern.
+
+    \sa Qt::PenStyle
+*/
+
+/*!
+    \qmlproperty ShapePath SvgPath::strokeWidth
+
+    The width of the line.
+
+    When set to a negative value, no line is drawn.
+
+    The default value is 1.
+*/
+
+/*!
+    \qmlproperty string SvgPath::path
+
+    The SVG path data string specifying the path.
+
+    For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData}
+    {W3C SVG Path Data}.
+*/
+
+/*!
+    \qmlproperty bool SvgPath::antialising
+
+    Whether the path should be antialiased.
+
+    Antialiasing might require more memory and slow down drawing the type.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc
new file mode 100644
index 0000000000..a8431b2f06
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/components/qqs-components-triangle.qdoc
@@ -0,0 +1,287 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \qmltype Triangle
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits ShapePath
+    \ingroup qtquickstudio-components
+
+    \brief A triangle.
+
+    The Triangle type can be used to draw triangles with different dimensions
+    and shapes. The type is enclosed in an invisible \l Rectangle type. The size
+    of the triagle is determined by the size of the bounding rectangle. The
+    dimensions of the triangle can be changed to make it elongated or squatter
+    with space around it by using the \l leftMargin, \l topMargin,
+    \l rightMargin, and \l bottomMargin properties. The margins are set between
+    the triangle and the edges of the parent rectangle.
+
+    Each Triangle item is painted using either a solid fill color, specified
+    using the \l fillColor property, or a gradient, defined using one of the
+    \l ShapeGradient subtypes and set using the \l gradient property.
+    If both a color and a gradient are specified, the gradient is used.
+
+    An optional border can be added to a triangle with its own color and
+    thickness by setting the \l strokeColor and \l strokeWidth properties.
+    Setting the color to \c transparent creates a border without a fill color.
+
+    \section2 Example Usage
+
+    You can use the Triangle component in \QDS to create triangles in different
+    shapes and colors.
+
+    \image studio-triangle.png
+
+    The QML code looks as follows:
+
+    \code
+    TriangleItem {
+        id: triangle
+        strokeColor: "gray"
+        fillColor: "light gray"
+    }
+
+    TriangleItem {
+        id: squatTriangle
+        bottomMargin: 10
+        topMargin: 30
+        fillColor: "#d3d3d3"
+        strokeColor: "#808080"
+    }
+
+    TriangleItem {
+        id: elongatedTriangle
+        leftMargin: 15
+        rightMargin: 15
+        fillColor: "#d3d3d3"
+        strokeColor: "#808080"
+    }
+
+    TriangleItem {
+        id: pear
+        radius: 20
+        fillColor: "light gray"
+        bottomMargin: 10
+        arcRadius: 20
+        strokeColor: "#808080"
+    }
+    \endcode
+*/
+
+/*!
+    \qmlproperty ShapePath Triangle::dashOffset
+
+    The starting point of the dash pattern for the triangle border.
+
+    The offset is measured in terms of the units used to specify the dash
+    pattern. For example, a pattern where each stroke is four units long,
+    followed by a gap of two units, will begin with the stroke when drawn
+    as a line. However, if the dash offset is set to 4.0, any line drawn
+    will begin with the gap. Values of the offset up to 4.0 will cause part
+    of the stroke to be drawn first, and values of the offset between 4.0 and
+    6.0 will cause the line to begin with part of the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+
+/*!
+    \qmlproperty ShapePath Triangle::dashPattern
+
+    The dash pattern of the triangle border specified as the dashes and the
+    gaps between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash
+    with the length 5 and width 10 is 50 pixels long.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+    followed by a space of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+
+/*!
+    \qmlproperty ShapePath Triangle::fillColor
+
+    The triangle fill color.
+
+    A gradient for the fill can be specified by using \l gradient. If both a
+    color and a gradient are specified, the gradient is used.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+*/
+
+/*!
+    \qmlproperty ShapePath Triangle::gradient
+
+    The gradient of the triangle fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the
+    fill uses a solid color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the
+    \l ShapeGradient subtypes.
+
+    \note The \l Gradient type cannot be used here. Rather, prefer using one of
+    the advanced subtypes, like \l LinearGradient.
+*/
+
+/*!
+    \qmlproperty enumeration Triangle::joinStyle
+
+    The join style used to connect two triangle line segments.
+
+        \value ShapePath.MiterJoin
+           The outer edges of the lines are extended to meet at an angle, and
+           this area is filled.
+    \value ShapePath.BevelJoin
+           The triangular notch between the two lines is filled.
+           This is the default value.
+    \value ShapePath.RoundJoin
+           A circular arc between the two lines is filled.
+
+    \sa Qt::PenJoinStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Triangle::strokeColor
+
+    The color used to draw the border of the triangle.
+
+    When set to \c transparent, no line is drawn.
+
+    The default value is \c white.
+
+    \sa QColor
+*/
+
+/*!
+    \qmlproperty ShapePath Triangle::strokeStyle
+
+    The style of the triangle border.
+
+    \value ShapePath.SolidLine
+           A solid line. This is the default value.
+    \value ShapePath.DashLine
+           Dashes separated by a few pixels.
+           The \l dashPattern property specifies the dash pattern.
+
+    \sa Qt::PenStyle
+*/
+
+/*!
+    \qmlproperty ShapePath Triangle::strokeWidth
+
+    The width of the border of the rectangle.
+
+    A width of 1 creates a thin line. For no line, use a negative value or a
+    transparent color.
+
+    \note The width of the rectangle's border does not affect the geometry of
+    the rectangle itself or its position relative to other items if anchors are
+    used.
+
+    The border is rendered within the rectangle's boundaries.
+*/
+
+/*!
+    \qmlproperty int Triangle::radius
+
+    Defines the rotation of the triangle in degrees. The default value is 0.
+
+    This property can be used together with the \l radius property to
+    determine the shape of the triangle.
+
+    \sa arcRadius
+*/
+
+/*!
+    \qmlproperty real Triangle::arcRadius
+
+    The radius used to draw rounded corners.
+
+    If radius is non-zero, the corners will be rounded, otherwise they will
+    be sharp.
+
+    This property can be used together with the \l radius property to
+    determine the shape of the triangle.
+*/
+
+/*!
+    \qmlproperty real Triangle::leftMargin
+
+    The left margin between the triangle and the bounding rectangle.
+
+    Setting the left and right margins makes the triangle thinner and moves it
+    away from the edge.
+
+    \sa rightMargin, topMargin, bottomMargin
+*/
+
+/*!
+    \qmlproperty real Triangle::topMargin
+
+    The top margin between the triangle and the bounding rectangle.
+
+    Setting the top and bottom margins makes the triangle lower and moves it
+    away from the edge.
+
+    \sa bottomMargin, leftMargin, rightMargin
+*/
+
+/*!
+    \qmlproperty real Triangle::rightMargin
+
+    The left margin between the triangle and the bounding rectangle.
+
+    Setting the left and right margins makes the triangle thinner and moves it
+    away from the edge.
+
+    \sa leftMargin, topMargin, bottomMargin
+*/
+
+/*!
+    \qmlproperty real Triangle::bottomMargin
+
+    The top margin between the triangle and the bounding rectangle.
+
+    Setting the top and bottom margins makes the triangle shorter and moves it
+    away from the edge.
+
+    \sa topMargin, leftMargin, rightMargin
+*/
+
+/*!
+    \qmlproperty bool Triangel::antialiasing
+
+    Whether the triangle should be antialiased.
+
+    Antialiasing might require more memory and slow down drawing the type.
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc
new file mode 100644
index 0000000000..82eef3cae7
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Design Studio Manual}
+    \page qtquickdesigner-components-overview.html
+
+    \title Qt Quick Studio Components
+
+    The Qt Quick Studio Components module provides sets of components and
+    effects enhanced for creating animated UIs. The components inherit
+    \l {Qt Quick Shapes QML Types}. The effects inherit the types in the
+    \l {Qt Graphical Effects} module.
+
+    \section1 Using Studio Components
+
+    A set of ready-made studio components are available for creating differently
+    shaped objects, such as arcs, pies, or triangles, as well as objects with
+    particular abilities, such as being visibly \e flipped between their front
+    and back sides, like a card. The studio components are built on top of
+    \l {Qt Quick Shapes QML Types}, with some additional properties.
+
+    The following table summarizes the available studio components and contains
+    links to their documentation.
+
+    \annotatedlist qtquickstudio-components
+
+    \include qtdesignstudio-visual-effects.qdocinc qml visual effects
+
+*/
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc
new file mode 100644
index 0000000000..7f67c3daf2
--- /dev/null
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickstudiocomponents-qmlmodule.qdoc
@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \qmlmodule QtQuick.Studio.Components 1.0
+    \title Qt Quick Studio Components QML Types
+    \ingroup qmlmodules
+    \brief Provides components enhanced for creating animated UIs.
+
+    A set of ready-made studio components are available for creating differently
+    shaped objects, such as arcs, pies, or triangles, as well as objects with
+    particular abilities, such as being visibly \e flipped between their front
+    and back sides, like a card. The studio components are built on top of
+    \l {Qt Quick Shapes QML Types}, with some additional properties.
+
+    The QML types can be imported into your application using the following
+    import statements in your .qml file:
+
+    \badcode
+    import QtQuick.Studio.Components 1.0
+    \endcode
+
+    \omit
+    \\ TODO: Include the omitted text when the module becomes a Qt module.
+    Currently, the components are a part of Qt Design Studio.
+
+    To link against the module, add the following QT variable to your qmake .pro
+    file:
+
+    \badcode
+    QT += studiocomponents
+    \endcode
+    \endomit
+*/