Accessing Canvas Configuration Settings

Navigate to Settings

Find the configuration settings by clicking on 'File' and then selecting 'Global Settings'. This area is dedicated to the design canvas in Freestyle.

Primary Purposes of Canvas Configuration

1. Include Site.css

When you choose to include Site.css, this action integrates the Site.css file into the iframe of the visual layout. This integration means that the CSS rules defined in Site.css will be applied across all HTML elements within the canvas.

2. Add Stylesheets

This setting allows you to add custom CSS stylesheets to your project. When you apply these styles, they will be reflected on the canvas, enabling you to preview how your CSS changes will appear in the final design. It's important to understand that these changes are primarily for visualization purposes within the canvas. They help you anticipate how styles will look on the actual webpage, but this setting does not directly alter the CSS of the actual webpage itself. Also, when you use classes from these stylesheets, these class names will be included in the JSON output.

3. Include Site.js

Including Site.js means embedding the JavaScript file within the iframe of the visual layout. This embedding allows the JavaScript code within Site.js to interact with and modify the behavior and interactive elements within the canvas.

4. Add Scripts

When you add JavaScript files using this setting, it allows you to incorporate custom scripts into the canvas. This is particularly useful for testing and visualizing how interactive elements or scripts will affect the layout or behavior within the canvas. However, this integration is limited to the canvas and does not directly influence the behavior of the actual webpage.

Example