diff --git a/src/plugins/qmljstools/CMakeLists.txt b/src/plugins/qmljstools/CMakeLists.txt
index ff53df82d8e..cc1a9eadf21 100644
--- a/src/plugins/qmljstools/CMakeLists.txt
+++ b/src/plugins/qmljstools/CMakeLists.txt
@@ -8,8 +8,8 @@ add_qtc_plugin(QmlJSTools
     qmljscodestylepreferences.cpp qmljscodestylepreferences.h
     qmljscodestylepreferenceswidget.cpp qmljscodestylepreferenceswidget.h
     qmljscodestylesettings.cpp qmljscodestylesettings.h
-    qmljscodestylesettingswidget.cpp qmljscodestylesettingswidget.h qmljscodestylesettingswidget.ui
-    qmljscodestylesettingspage.cpp qmljscodestylesettingspage.h qmljscodestylesettingspage.ui
+    qmljscodestylesettingswidget.cpp qmljscodestylesettingswidget.h
+    qmljscodestylesettingspage.cpp qmljscodestylesettingspage.h
     qmljsfunctionfilter.cpp qmljsfunctionfilter.h
     qmljsindenter.cpp qmljsindenter.h
     qmljslocatordata.cpp qmljslocatordata.h
diff --git a/src/plugins/qmljstools/qmljscodestylepreferencesfactory.cpp b/src/plugins/qmljstools/qmljscodestylepreferencesfactory.cpp
index 12a41a5dd5e..4c546e3348f 100644
--- a/src/plugins/qmljstools/qmljscodestylepreferencesfactory.cpp
+++ b/src/plugins/qmljstools/qmljscodestylepreferencesfactory.cpp
@@ -59,8 +59,7 @@ TextEditor::CodeStyleEditorWidget *QmlJSCodeStylePreferencesFactory::createEdito
     auto qmlJSPreferences = qobject_cast<QmlJSCodeStylePreferences *>(preferences);
     if (!qmlJSPreferences)
         return nullptr;
-    auto widget = new Internal::QmlJSCodeStylePreferencesWidget(parent);
-    widget->layout()->setContentsMargins(0, 0, 0, 0);
+    auto widget = new Internal::QmlJSCodeStylePreferencesWidget(this, parent);
     widget->setPreferences(qmlJSPreferences);
     return widget;
 }
diff --git a/src/plugins/qmljstools/qmljscodestylesettingspage.cpp b/src/plugins/qmljstools/qmljscodestylesettingspage.cpp
index d96856ed2f3..edb7b942468 100644
--- a/src/plugins/qmljstools/qmljscodestylesettingspage.cpp
+++ b/src/plugins/qmljstools/qmljscodestylesettingspage.cpp
@@ -4,11 +4,11 @@
 #include "qmljscodestylesettingspage.h"
 
 #include "qmljscodestylepreferences.h"
+#include "qmljscodestylepreferenceswidget.h"
 #include "qmljsindenter.h"
 #include "qmljsqtstylecodeformatter.h"
 #include "qmljstoolsconstants.h"
 #include "qmljstoolssettings.h"
-#include "ui_qmljscodestylesettingspage.h"
 
 #include <coreplugin/icore.h>
 #include <extensionsystem/pluginmanager.h>
@@ -16,9 +16,12 @@
 #include <texteditor/codestyleeditor.h>
 #include <texteditor/displaysettings.h>
 #include <texteditor/fontsettings.h>
+#include <texteditor/simplecodestylepreferenceswidget.h>
+#include <texteditor/snippets/snippeteditor.h>
 #include <texteditor/snippets/snippetprovider.h>
 #include <texteditor/tabsettings.h>
 #include <texteditor/texteditorsettings.h>
+#include <utils/layoutbuilder.h>
 
 #include <QTextStream>
 
@@ -29,13 +32,30 @@ namespace Internal {
 
 // ------------------ CppCodeStyleSettingsWidget
 
-QmlJSCodeStylePreferencesWidget::QmlJSCodeStylePreferencesWidget(QWidget *parent) :
-    TextEditor::CodeStyleEditorWidget(parent),
-    m_ui(new Ui::QmlJSCodeStyleSettingsPage)
+QmlJSCodeStylePreferencesWidget::QmlJSCodeStylePreferencesWidget(
+        const TextEditor::ICodeStylePreferencesFactory *factory, QWidget *parent)
+    : TextEditor::CodeStyleEditorWidget(parent)
 {
-    m_ui->setupUi(this);
+    m_tabPreferencesWidget = new SimpleCodeStylePreferencesWidget;
+    m_codeStylePreferencesWidget = new QmlJSTools::QmlJSCodeStylePreferencesWidget;
+    m_previewTextEdit = new SnippetEditorWidget;
+    m_previewTextEdit->setPlainText(factory->previewText());
+    QSizePolicy sp(QSizePolicy::MinimumExpanding, QSizePolicy::MinimumExpanding);
+    sp.setHorizontalStretch(1);
+    m_previewTextEdit->setSizePolicy(sp);
 
     decorateEditor(TextEditorSettings::fontSettings());
+
+    using namespace Utils::Layouting;
+    Row {
+        Column {
+            m_tabPreferencesWidget,
+            m_codeStylePreferencesWidget,
+            st,
+        },
+        m_previewTextEdit,
+    }.attachTo(this, WithoutMargins);
+
     connect(TextEditorSettings::instance(), &TextEditorSettings::fontSettingsChanged,
        this, &QmlJSCodeStylePreferencesWidget::decorateEditor);
 
@@ -44,16 +64,11 @@ QmlJSCodeStylePreferencesWidget::QmlJSCodeStylePreferencesWidget(QWidget *parent
     updatePreview();
 }
 
-QmlJSCodeStylePreferencesWidget::~QmlJSCodeStylePreferencesWidget()
-{
-    delete m_ui;
-}
-
 void QmlJSCodeStylePreferencesWidget::setPreferences(QmlJSCodeStylePreferences *preferences)
 {
     m_preferences = preferences;
-    m_ui->tabPreferencesWidget->setPreferences(preferences);
-    m_ui->codeStylePreferencesWidget->setPreferences(preferences);
+    m_tabPreferencesWidget->setPreferences(preferences);
+    m_codeStylePreferencesWidget->setPreferences(preferences);
     if (m_preferences)
     {
         connect(m_preferences, &ICodeStylePreferences::currentTabSettingsChanged,
@@ -66,16 +81,16 @@ void QmlJSCodeStylePreferencesWidget::setPreferences(QmlJSCodeStylePreferences *
 
 void QmlJSCodeStylePreferencesWidget::decorateEditor(const FontSettings &fontSettings)
 {
-    m_ui->previewTextEdit->textDocument()->setFontSettings(fontSettings);
-    SnippetProvider::decorateEditor(m_ui->previewTextEdit,
+    m_previewTextEdit->textDocument()->setFontSettings(fontSettings);
+    SnippetProvider::decorateEditor(m_previewTextEdit,
                                     QmlJSEditor::Constants::QML_SNIPPETS_GROUP_ID);
 }
 
 void QmlJSCodeStylePreferencesWidget::setVisualizeWhitespace(bool on)
 {
-    DisplaySettings displaySettings = m_ui->previewTextEdit->displaySettings();
+    DisplaySettings displaySettings = m_previewTextEdit->displaySettings();
     displaySettings.m_visualizeWhitespace = on;
-    m_ui->previewTextEdit->setDisplaySettings(displaySettings);
+    m_previewTextEdit->setDisplaySettings(displaySettings);
 }
 
 void QmlJSCodeStylePreferencesWidget::slotSettingsChanged()
@@ -85,20 +100,20 @@ void QmlJSCodeStylePreferencesWidget::slotSettingsChanged()
 
 void QmlJSCodeStylePreferencesWidget::updatePreview()
 {
-    QTextDocument *doc = m_ui->previewTextEdit->document();
+    QTextDocument *doc = m_previewTextEdit->document();
 
     const TabSettings &ts = m_preferences
             ? m_preferences->currentTabSettings()
             : TextEditorSettings::codeStyle()->tabSettings();
-    m_ui->previewTextEdit->textDocument()->setTabSettings(ts);
+    m_previewTextEdit->textDocument()->setTabSettings(ts);
     CreatorCodeFormatter formatter(ts);
     formatter.invalidateCache(doc);
 
     QTextBlock block = doc->firstBlock();
-    QTextCursor tc = m_ui->previewTextEdit->textCursor();
+    QTextCursor tc = m_previewTextEdit->textCursor();
     tc.beginEditBlock();
     while (block.isValid()) {
-        m_ui->previewTextEdit->textDocument()->indenter()->indentBlock(block, QChar::Null, ts);
+        m_previewTextEdit->textDocument()->indenter()->indentBlock(block, QChar::Null, ts);
         block = block.next();
     }
     tc.endEditBlock();
diff --git a/src/plugins/qmljstools/qmljscodestylesettingspage.h b/src/plugins/qmljstools/qmljscodestylesettingspage.h
index b96dee3f38b..6e972958815 100644
--- a/src/plugins/qmljstools/qmljscodestylesettingspage.h
+++ b/src/plugins/qmljstools/qmljscodestylesettingspage.h
@@ -16,23 +16,24 @@ QT_END_NAMESPACE
 namespace TextEditor {
     class FontSettings;
     class CodeStyleEditor;
+    class SimpleCodeStylePreferencesWidget;
+    class SnippetEditorWidget;
 }
 
 namespace QmlJSTools {
 class QmlJSCodeStylePreferences;
+class QmlJSCodeStylePreferencesWidget;
 class QmlJSCodeStyleSettings;
 
 namespace Internal {
 
-namespace Ui { class QmlJSCodeStyleSettingsPage; }
-
 class QmlJSCodeStylePreferencesWidget : public TextEditor::CodeStyleEditorWidget
 {
     Q_OBJECT
 
 public:
-    explicit QmlJSCodeStylePreferencesWidget(QWidget *parent = nullptr);
-    ~QmlJSCodeStylePreferencesWidget() override;
+    explicit QmlJSCodeStylePreferencesWidget(const TextEditor::ICodeStylePreferencesFactory *factory,
+                                             QWidget *parent = nullptr);
 
     void setPreferences(QmlJSCodeStylePreferences* preferences);
 
@@ -43,7 +44,9 @@ private:
     void updatePreview();
 
     QmlJSCodeStylePreferences *m_preferences = nullptr;
-    Ui::QmlJSCodeStyleSettingsPage *m_ui;
+    TextEditor::SimpleCodeStylePreferencesWidget *m_tabPreferencesWidget;
+    QmlJSTools::QmlJSCodeStylePreferencesWidget *m_codeStylePreferencesWidget;
+    TextEditor::SnippetEditorWidget *m_previewTextEdit;
 };
 
 
diff --git a/src/plugins/qmljstools/qmljscodestylesettingspage.ui b/src/plugins/qmljstools/qmljscodestylesettingspage.ui
deleted file mode 100644
index acb034c71fd..00000000000
--- a/src/plugins/qmljstools/qmljscodestylesettingspage.ui
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<ui version="4.0">
- <class>QmlJSTools::Internal::QmlJSCodeStyleSettingsPage</class>
- <widget class="QWidget" name="QmlJSTools::Internal::QmlJSCodeStyleSettingsPage">
-  <property name="geometry">
-   <rect>
-    <x>0</x>
-    <y>0</y>
-    <width>138</width>
-    <height>112</height>
-   </rect>
-  </property>
-  <property name="windowTitle">
-   <string/>
-  </property>
-  <layout class="QGridLayout" name="gridLayout">
-   <item row="0" column="0">
-    <widget class="TextEditor::SimpleCodeStylePreferencesWidget" name="tabPreferencesWidget" native="true">
-     <property name="sizePolicy">
-      <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
-       <horstretch>0</horstretch>
-       <verstretch>0</verstretch>
-      </sizepolicy>
-     </property>
-    </widget>
-   </item>
-   <item row="2" column="0">
-    <spacer name="verticalSpacer">
-     <property name="orientation">
-      <enum>Qt::Vertical</enum>
-     </property>
-     <property name="sizeHint" stdset="0">
-      <size>
-       <width>20</width>
-       <height>267</height>
-      </size>
-     </property>
-    </spacer>
-   </item>
-   <item row="0" column="1" rowspan="3">
-    <widget class="TextEditor::SnippetEditorWidget" name="previewTextEdit">
-     <property name="plainText">
-      <string notr="true">import QtQuick 1.0
-
-Rectangle {
-    width: 360
-    height: 360
-    Text {
-        anchors.centerIn: parent
-        text: &quot;Hello World&quot;
-    }
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            Qt.quit();
-        }
-    }
-}
-</string>
-     </property>
-    </widget>
-   </item>
-   <item row="1" column="0">
-    <widget class="QmlJSTools::QmlJSCodeStylePreferencesWidget" name="codeStylePreferencesWidget" native="true"/>
-   </item>
-  </layout>
- </widget>
- <customwidgets>
-  <customwidget>
-   <class>TextEditor::SimpleCodeStylePreferencesWidget</class>
-   <extends>QWidget</extends>
-   <header location="global">texteditor/simplecodestylepreferenceswidget.h</header>
-   <container>1</container>
-  </customwidget>
-  <customwidget>
-   <class>TextEditor::SnippetEditorWidget</class>
-   <extends>QPlainTextEdit</extends>
-   <header location="global">texteditor/snippets/snippeteditor.h</header>
-  </customwidget>
-  <customwidget>
-   <class>QmlJSTools::QmlJSCodeStylePreferencesWidget</class>
-   <extends>QWidget</extends>
-   <header location="global">qmljstools/qmljscodestylepreferenceswidget.h</header>
-   <container>1</container>
-  </customwidget>
- </customwidgets>
- <resources/>
- <connections/>
-</ui>
diff --git a/src/plugins/qmljstools/qmljscodestylesettingswidget.cpp b/src/plugins/qmljstools/qmljscodestylesettingswidget.cpp
index 0da63045cce..0e6ece1934d 100644
--- a/src/plugins/qmljstools/qmljscodestylesettingswidget.cpp
+++ b/src/plugins/qmljstools/qmljscodestylesettingswidget.cpp
@@ -4,38 +4,46 @@
 #include "qmljscodestylesettingswidget.h"
 
 #include "qmljscodestylesettings.h"
-#include "ui_qmljscodestylesettingswidget.h"
 
+#include <utils/layoutbuilder.h>
+
+#include <QSpinBox>
 #include <QTextStream>
 
 namespace QmlJSTools {
 
-QmlJSCodeStyleSettingsWidget::QmlJSCodeStyleSettingsWidget(QWidget *parent) :
-    QGroupBox(parent),
-    ui(new Internal::Ui::QmlJSCodeStyleSettingsWidget)
+QmlJSCodeStyleSettingsWidget::QmlJSCodeStyleSettingsWidget(QWidget *parent)
+    : QWidget(parent)
 {
-    ui->setupUi(this);
+    m_lineLengthSpinBox = new QSpinBox;
+    m_lineLengthSpinBox->setMinimum(0);
+    m_lineLengthSpinBox->setMaximum(999);
 
-    connect(ui->lineLengthSpinBox, &QSpinBox::valueChanged,
+    using namespace Utils::Layouting;
+    Column {
+        Group {
+            title(tr("Qml JS Code Style")),
+            Form {
+                tr("&Line length:"), m_lineLengthSpinBox, br,
+            }
+        }
+    }.attachTo(this, WithoutMargins);
+
+    connect(m_lineLengthSpinBox, &QSpinBox::valueChanged,
             this, &QmlJSCodeStyleSettingsWidget::slotSettingsChanged);
 }
 
-QmlJSCodeStyleSettingsWidget::~QmlJSCodeStyleSettingsWidget()
-{
-    delete ui;
-}
-
 void QmlJSCodeStyleSettingsWidget::setCodeStyleSettings(const QmlJSCodeStyleSettings& s)
 {
     QSignalBlocker blocker(this);
-    ui->lineLengthSpinBox->setValue(s.lineLength);
+    m_lineLengthSpinBox->setValue(s.lineLength);
 }
 
 QmlJSCodeStyleSettings QmlJSCodeStyleSettingsWidget::codeStyleSettings() const
 {
     QmlJSCodeStyleSettings set;
 
-    set.lineLength = ui->lineLengthSpinBox->value();
+    set.lineLength = m_lineLengthSpinBox->value();
 
     return set;
 }
diff --git a/src/plugins/qmljstools/qmljscodestylesettingswidget.h b/src/plugins/qmljstools/qmljscodestylesettingswidget.h
index 71584a21bf1..784a32c115b 100644
--- a/src/plugins/qmljstools/qmljscodestylesettingswidget.h
+++ b/src/plugins/qmljstools/qmljscodestylesettingswidget.h
@@ -7,13 +7,14 @@
 
 #include <QGroupBox>
 
+QT_BEGIN_NAMESPACE
+class QSpinBox;
+QT_END_NAMESPACE
+
 namespace QmlJSTools {
 class QmlJSCodeStyleSettings;
 
-namespace Internal { namespace Ui { class QmlJSCodeStyleSettingsWidget; } }
-
-
-class QMLJSTOOLS_EXPORT QmlJSCodeStyleSettingsWidget : public QGroupBox
+class QMLJSTOOLS_EXPORT QmlJSCodeStyleSettingsWidget : public QWidget
 {
     Q_OBJECT
 
@@ -24,7 +25,6 @@ public:
     };
 
     explicit QmlJSCodeStyleSettingsWidget(QWidget *parent = nullptr);
-    ~QmlJSCodeStyleSettingsWidget() override;
 
     QmlJSCodeStyleSettings codeStyleSettings() const;
 
@@ -38,7 +38,7 @@ private:
     void slotSettingsChanged();
     void codingStyleLinkActivated(const QString &linkString);
 
-    Internal::Ui::QmlJSCodeStyleSettingsWidget *ui;
+    QSpinBox *m_lineLengthSpinBox;
 };
 
 } // namespace QmlJSTools
diff --git a/src/plugins/qmljstools/qmljscodestylesettingswidget.ui b/src/plugins/qmljstools/qmljscodestylesettingswidget.ui
deleted file mode 100644
index a8756925ed6..00000000000
--- a/src/plugins/qmljstools/qmljscodestylesettingswidget.ui
+++ /dev/null
@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<ui version="4.0">
- <class>QmlJSTools::Internal::QmlJSCodeStyleSettingsWidget</class>
- <widget class="QGroupBox" name="QmlJSTools::Internal::QmlJSCodeStyleSettingsWidget">
-  <property name="geometry">
-   <rect>
-    <x>0</x>
-    <y>0</y>
-    <width>254</width>
-    <height>203</height>
-   </rect>
-  </property>
-  <property name="windowTitle">
-   <string notr="true"/>
-  </property>
-  <property name="title">
-   <string>Qml JS Code Style</string>
-  </property>
-  <layout class="QGridLayout" name="gridLayout">
-   <item row="0" column="0" colspan="2">
-    <layout class="QHBoxLayout" name="horizontalLayout">
-     <item>
-      <widget class="QLabel" name="lineLengthLabel">
-       <property name="sizePolicy">
-        <sizepolicy hsizetype="Maximum" vsizetype="Preferred">
-         <horstretch>0</horstretch>
-         <verstretch>0</verstretch>
-        </sizepolicy>
-       </property>
-       <property name="text">
-        <string>&amp;Line length:</string>
-       </property>
-       <property name="buddy">
-        <cstring>lineLengthSpinBox</cstring>
-       </property>
-      </widget>
-     </item>
-     <item>
-      <widget class="QSpinBox" name="lineLengthSpinBox">
-       <property name="sizePolicy">
-        <sizepolicy hsizetype="Maximum" vsizetype="Fixed">
-         <horstretch>0</horstretch>
-         <verstretch>0</verstretch>
-        </sizepolicy>
-       </property>
-       <property name="minimum">
-        <number>0</number>
-       </property>
-       <property name="maximum">
-        <number>999</number>
-       </property>
-      </widget>
-     </item>
-     <item>
-      <spacer name="horizontalSpacer">
-       <property name="orientation">
-        <enum>Qt::Horizontal</enum>
-       </property>
-       <property name="sizeHint" stdset="0">
-        <size>
-         <width>40</width>
-         <height>20</height>
-        </size>
-       </property>
-      </spacer>
-     </item>
-    </layout>
-   </item>
-  </layout>
- </widget>
- <tabstops>
-  <tabstop>lineLengthSpinBox</tabstop>
- </tabstops>
- <resources/>
- <connections/>
-</ui>
diff --git a/src/plugins/qmljstools/qmljstools.qbs b/src/plugins/qmljstools/qmljstools.qbs
index 9ce2a5f1758..68c9a9dfc15 100644
--- a/src/plugins/qmljstools/qmljstools.qbs
+++ b/src/plugins/qmljstools/qmljstools.qbs
@@ -29,10 +29,8 @@ QtcPlugin {
         "qmljscodestylesettings.h",
         "qmljscodestylesettingspage.cpp",
         "qmljscodestylesettingspage.h",
-        "qmljscodestylesettingspage.ui",
         "qmljscodestylesettingswidget.cpp",
         "qmljscodestylesettingswidget.h",
-        "qmljscodestylesettingswidget.ui",
         "qmljsfunctionfilter.cpp",
         "qmljsfunctionfilter.h",
         "qmljsindenter.cpp",