---
title: Compact Survey Creator UI
product: Survey Creator
description: Explore how to optimize Survey Creator's layout for limited screen space using CSS variables and settings of the UI theme. View this JavaScript form builder demo to learn how to easily adjust scaling and font size through the no-code UI for a more compact design.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Compact Survey Creator UI (Vanilla JS)

Survey Creator is a feature-rich tool designed for spacious layouts. When screen space is limited, you can make its UI more compact by adjusting the scaling, spacing, and font size CSS variables. These variables can be defined in CSS or included in a Survey Creator theme. In this demo, they are part of the theme and can be modified in the Theme settings, accessible from the gear icon in the bottom-right corner of the Designer tab.

## See Also

[Design Tokens — CSS-Based Customization](/documentation/design-tokens-css-customization (linkStyle))

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

const creator = new SurveyCreator();

creator.applyCreatorTheme({
    "cssVariables": {
        "--sjs2-base-unit-size": "5.2px",
        "--sjs2-base-unit-spacing": "5.2px",
        "--sjs2-base-unit-font-size": "6.8px"
    }
});
creator.showSidebar = false;
setTimeout(() => {
    creator.openCreatorThemeSettings();
}, 400);
creator.render("surveyCreatorContainer");
```

### `package.json`

```json
{
  "dependencies": {
    "survey-core": "latest",
    "survey-js-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-js": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/jquery.md)