---
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: React
source: https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Compact Survey Creator UI (React)

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/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
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

function SurveyCreatorRenderComponent() {
    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);
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `src/index.css`

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

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render(<SurveyCreatorRenderComponent />);
```

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/angular.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)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/compact-survey-creator-ui/vanillajs.md)