Flex Code Development Interface

Visual Elements

Click or drag to insert elements into your HTML code.

FlexAssets

Upload assets using the "Upload Assets" button in the header. Drag them onto the preview or into the FlexHTML editor.

Drop element here to insert into HTML

Flex Code Development Interface - Key & Commands

Flex Code Core Functionality:

FlexHTML Editor: Edit your web page's structure.

FlexCSS Editor: Style your web page.

FlexJS Editor: Add interactivity to your web page.

Visual Editor: Drag and drop common HTML elements directly into your project.

Live Preview: See your changes instantly in the preview frame.

Flex Code Commands & Features:

Run Button: Manually refresh the preview with the latest code.

Fullscreen Button: View the preview in fullscreen mode.

Export Project: Download your entire project (FlexHTML, FlexCSS, FlexJS, and uploaded assets) as a .zip file.

Upload Assets: Add local files (images, audio, etc.) to be included in your exported project.

Toggle Theme: Switch between light and dark mode for the interface.

Drag & Drop Elements: Drag elements from the Visual tab palette directly onto the preview area to insert them into your FlexHTML.

Flex Code Naming Convention:

Many core functions in the JavaScript codebase are prefixed with flexCode (e.g., flexCodeUpdatePreview()) to signify their origin and importance within this development environment.

FlexHTML Tags & Attributes:

<div>: Generic container. Attributes: id, class, style.

<p>: Paragraph text.

<h1>-<h6>: Heading levels.

<a>: Anchor/Link. Attribute: href (e.g., <a href="https://example.com">Link</a>).

<img>: Image. Attributes: src (source), alt (alt text), width, height.

<button>: Clickable button.

<input>: Input field. Attribute: type (e.g., text, number, checkbox).

<ul>, <ol>, <li>: Unordered list, Ordered list, List item.

<video>: Embeds video content. Attributes: src (source), width, height, controls.

Global Attributes: id="..." (unique identifier), class="..." (CSS classes), style="..." (inline CSS).

FlexCSS Properties:

color: Sets the text color. (e.g., color: blue;)

background-color: Sets the background color of an element. (e.g., background-color: #f0f0f0;)

font-family: Sets the font for text. (e.g., font-family: Arial, sans-serif;)

font-size: Sets the size of the font. (e.g., font-size: 16px;)

margin: Outer spacing around an element. (e.g., margin: 10px 20px;)

padding: Inner spacing within an element. (e.g., padding: 15px;)

display: Controls layout behavior. (e.g., display: block;, display: flex;, display: none;)

position: Specifies the type of positioning method. (e.g., position: relative;, position: absolute;)

width, height: Sets the dimensions of an element. (e.g., width: 100%;, height: 200px;)

border: Sets the border properties. (e.g., border: 1px solid black;)

border-radius: Rounds the corners of an element. (e.g., border-radius: 5px;)

text-align: Aligns the text within an element. (e.g., text-align: center;)

FlexJS Commands & APIs:

document.getElementById('id-name'): Selects an HTML element by its id.

document.querySelector('.class-name') or document.querySelector('tag-name'): Selects the first element that matches a CSS selector.

element.addEventListener('event', function): Attaches an event handler to an element. (e.g., 'click', 'input', 'DOMContentLoaded')

element.value: Gets or sets the value of input fields or textareas.

element.style.propertyName: Accesses or modifies inline CSS properties. (e.g., element.style.display = 'none';)

element.classList.add('class-name'), .remove(), .toggle(): Manages CSS classes on an element.

console.log('message'): Outputs messages to the browser's console for debugging.

if (...) { ... } else { ... }: Conditional statements.

function name() { ... }: Defines a function.

const variableName = value;, let variableName = value;: Declares variables.

Flex Code Exclusive Commands:

flexCodeConsoleLog('Your message here'): Logs a message to the browser console and displays it directly within the preview output area. This allows you to see debug messages within the rendered page itself without opening the developer console.