Release Notes
v15.36.0
14 October 2024
New Feature
Now you can publish your site or application in a few short steps for free, or connect your domain to use your own.
Codux now supports navigating to dynamic pages, as well the URL parameter as defined by the getStaticRoutes method on the page.
Improved
Codux now displays selection highlights better, supporting more advanced layout structures.
Codux now defaults to showing the stage at 100% zoom rather than zooming to scale.
Rulers on stage are now better aligned with the content being displayed.
Improved hot reloading experience when picking up changes in a running application.
Forcing element states in the Styles panel now handles complex selectors better.
Connecting and disconnecting Wix Headless services now responds better to changes.
Made the sidebar open and close behavior more predictable.
Bug Fixes
The selectors controller no longer reaches an indeterminate state where a valid selection can no longer be applied.
Editing values in the Global Variables panel no longer randomly jumps to the end of the input.
An indicator now shows in the Add Elements panel when a variant results in an error.
Running your application in Codux now responds correctly to dependency installations.
Codux can now display Wix Media images even if some parameters (height, width, mode) are missing.
v15.35.2
8 October 2024
New Features
Codux now offers a brand-new way of working. Build modern, rich, custom applications based on the Remix framework, with visual page and routing management. Check out our updated starter projects for a quick start, and learn more about building an e-commerce store here.
Codux now includes a new dashboard, letting you manage your project’s application, boards, and UI Kit.
A new Global Variables panel shows all the CSS and Sass variables defined across all common style files configured in the project, letting you view and edit all style tokens from a single place.
A new Wix Services panel allows you to quickly and easily connect your project to a Wix Headless site, giving you the option of using services such as e-commerce, bookings, and CMS.
Now you can mark a selection as a variant through context menus on stage and in the Elements panel, and then easily consume your variants through the Add Elements panel, and view them as a part of your UI kit.
Improved
A new codux.config.json option under previewConfiguration – envFile, enables pointing to an existing environment file to use for environment configuration settings for the application, such as API keys, debug modes, URLs, ports, logging configurations, and more.
The Styles panel selector selection mechanism now auto-selects a common CSS class if it’s the only one applied.
New boards are no longer shown in the Add Elements panel by default.
Codux now adheres to module definitions within the package.json file for packages that should not run within a browser context.
Bug Fixes
The children property visual controller now properly allows binding a value in case it is an only child, with more support coming in the future.
Clearing a value in the Styles panel no longer causes it to spontaneously collapse.
The Styles panel no longer collapses open sections when a style modification automatically creates a selector.
v15.34.0
4 September 2024
New Features
Codux now color-codes collapsed sections of the Styles panel when a style property within that section is defined in that selector (blue) or defined and overridden by a different selector (orange).
We updated our Website Starter and E-Commerce Starter template projects, as well as our Portfolio example project to use Remix as the underlying framework for a more performant, modern development experience.
Now you can select from a list of ready-made third party component libraries (Semantic UI and Nivo) when creating a new project with Codux.
Improved
Major Change: Codux has dropped support for React 17.x.x to focus on the most modern React development experience.
Clicking on the empty space around the stage now clears the currently-selected element.
We enhanced the data binding experience for arguments of a function call used by a property in the Properties panel.
The border, outline, and background visual controllers in the Styles panel now also indicate defined or overridden shorthand values with colors (blue for defined and orange for overridden).
Bug Fixes
Codux now correctly responds to changes made to any assets in the project without requiring a restart.
Resolved an issue where dragging an element between different props rendered in a self-closing tag would fail.
Fixed an issue where Codux incorrectly resolved the location of a selector if its CSS rule only contained a comment within its body.
Resolved issues where Codux failed to auto-create selectors on Windows machines.
Fixed an issue where using the class auto-create feature on Windows would lead to (very long and horrible) improper names.
The TypeScript completions in the built-in code editor are now correct even when the project’s package.json file contains invalid dependencies.
Resolved an issue where the ‘Edit in Styles panel’ feature in the Computed Styles panel would take you to the incorrect place in the Styles panel in certain cases.
Disabled renaming of classes imported using @use/@import directives until full support for these features is implemented.
v15.33.0
20 August 2024
New Features
You can now rename any auto-generated or custom class, and have all instances of the old name across all CSS and JSX updated seamlessly.
Now you can rename projects in the Codux project picker.
Improved
Double-clicking text on the stage will no longer open the Properties panel.
The file tree now shows the Git status for each file.
The Styles panel now offers the ability to clear a value or jump to an overriding selector when hovering on the property name.
Redesigned the corners visual controller in the Styles panel.
Codux now properly switches between the applied classes menu and the new classes menu.
Clicking on any selected enum visual controller value in the Styles panel now toggles it on and off.
Added a loading indicator when opening a project from the Project Picker.
Bug Fixes
Text nodes will no longer trigger interactive events (hover, click, etc.) while in Select mode.
Codux now better supports components that use Fragments as their root node (common with Radix components) where their first child is not a renderable element (like a <style> tag).
Using a ContentSlot will no longer hijack the selection when using deep select (Ctrl / ⌘ + click).
Codux now treats SVG components imported with "?react" query suffix as components.
Media asset selection frames now resize correctly once an asset has loaded.
Codux now takes into account imported style files that match the pattern of the component file name, and suggests classes accordingly.
Codux now correctly implements code formatting based on the .prettierignore file.
The Elements panel now properly displays ternary cases where one of the values was a raw text node.
Codux now releases the highlight / selection frame when hovering out from the component.
The variable picker in the Styles panel no longer suggests size / color variables for the border shorthand property.
Codux now supports media assets with spaces in their file names and paths.
The background controller now correctly resolves media assets even when defined in other stylesheets.
Refreshing a board no longer clears the code drawer log.
The Properties panel can now correctly detach a value inside a complex data type even when the value is a reference.
Codux no longer crashes when opening a project with an invalid package.json file.
Fixed a visual bug where the variable picker and context menu in the Styles panel could flicker repeatedly.
The homepage boards filtering input now correctly shows the names of components that use a default export.
Codux now takes into account a component’s displayName when showing its name in the UI.
Codux now correctly updates after deleting the Codux config file while the editor is open.
v15.32.0
30 July 2024
New Features
You can now deep-select any element or component on stage using the CTRL / ⌘ key from any scope, and then selecting the target element on stage.
The font family visual controller now displays a preview of all fonts.
The background visual controller now provides access to the Codux media picker.
Improved
You can now style selected raw text nodes with the changes being applied to the first parent DOM node.
Made selection highlights more visible on stage.
The Styles panel now shows only the relevant layout controllers based on the displayed mode set (flex, grid, etc.)
Direction-based visual controllers (such as align and justify) now have directional icons based on the axis chosen.
Improved the error messages in the Elements panel to better explain when something doesn’t work.
The Styles panel now shows the size and layout categories for all elements except for raw text nodes where it shows the size and text categories instead.
Properties with defined values now always show at the top of the Properties panel list.
The Properties panel now shows properties that were defined inline in the component as higher importance, and thus higher up in the list.
Codux now supports working a component property as an image using the ‘@format image-url’ jsdoc comment.
Split the Self Layout section in the Styles panel into Flex Child and Grid Child sections.
Reorganized the Codux New Project page to make starting a new project more straightforward.
The Media Manager now sorts assets according to when they were added to the project.
Bug Fixes
Codux now correctly resolves references in the project’s TypeScript configuration file, making sure all required types are available.
Dependencies are now resolved using symbolic links, improving the experience of using pnpm as a package manager.
Better support added for auto-creating classes and selectors in cases where the selected node and the applied node are different.
Styles panel visual controllers now show the updated value after changing variables in theme files through the code.
Selected selector in the Styles panel now properly reacts to changes to its source.
Fixed the appearance of disabled unit inputs in the Styles panel.
Improved the experience of using the mouse within the tags visual controller.
A couple of bugs related to the recently-added dark theme.
v15.31.0
17 July 2024
New Features
You can now control your component behavior better by receiving suggestions for property values to attach, as well as by viewing and detaching property values right from the Properties panel.
Codux can now generate new boards for your components (including their properties) using AI, allowing you to seamlessly start editing your own project.
Codux will now automatically create a class and selector for elements that don’t have them when styling them in the Styles panel.
We’ve added a new Settings panel to let you view and edit your Codux project configuration visually.
You can now navigate to the Styles panel from the Properties panel when using relevant search queries, and to the Styles panel from the Properties panel using the className visualizer.
Now you can see an introductory video when you open a board for the first time, giving you all the info you need to get started.
Improved
The Canvas element is no longer available. This means that applied environment properties that control the canvas will no longer take effect, and the canvas resizer tools on the stage and the inputs in the Board settings panel have all been removed. This enables Codux to now have all elements behave as they would on the browser. If you would like to center your isolated components for test purposes, wrap them in a div and apply the relevant styles on it.
Selecting an element now shows the margins and padding that are applied to it.
You can now change media through the Codux Media Manager by double-clicking an image on stage.
The Codux Online Playground now has messaging for features only available in the desktop version.
Now you can schedule an appointment with us through a Calendly link from the Codux help widget.
Bug Fixes
Fixed an issue where continuous background scripts initiated from Codux continued running even after closing Codux.
Fixed an issue where deleted files would still appear in the code drawer following deletion.
Fixed an issue where the list of style variables didn’t update after making changes in code.
Fixed an issue where the Codux Home page didn’t always display all boards when moving across branches.
Fixed an issue where Codux could not commit and push GitHub workflow files.
Fixed several issues related to Codux dark mode.
Fixed rendering inconsistencies between a board and its thumbnail, related to attributes on the HTML element.
Fixed an issue where you could not drill in to a component from your project rendered as the root of a third party component.
v15.30.0
3 July 2024
New Features
Codux now has a dark theme, set automatically based on the operating system settings. You can find the controls for theme settings in the Codux user account menu.
Codux now shows media query markers for width and height, and enables resizing the preview window to activate the relevant media queries.
Now you can tag your boards to organize and filter them on the Codux Home tab.
Users will now be able to view the deployed version of each of the templates and example projects, prior to choosing which template to use.
Codux now allows users to view and detach expressions bound to properties in the Properties panel.
Improved
We moved the Add Elements panel button to the left sidebar of Codux for quicker, more apparent access.
We improved the way the Styles panel section headers now reflect inheritance, default values and value overrides within the CSS.
The “Add element” option in the Elements panel is now shown in more cases.
All board zoom settings are now set to scale to fit when opening them.
The Elements panel right-click action menu now includes an “Add child” option.
Hovering over an element on the stage now also highlights its occurrence in the Elements panel.
We’ve reduced the board minimal window size to 50px from 300px.
Bug Fixes
You can no longer “close everything to the right of this” in the code drawer when you’re on the right-most tab.
Fixed an issue where navigation from the Computed Styles panel to the Styles panel did not work as expected when the Styles panel section was minimized.
Fixed an issue where dragging and dropping an element onto itself could cause unpredictable behavior.
Fixed an issue where double-clicking an HTML element (<a>, <button/>, etc.) on the stage would trigger its event rather than allow you to change its text.
v15.29.1
19 June 2024
Improved
Improved the Styles panel search functionality.
Codux now keeps the Git changed files list open while viewing file diffs.
Codux now shows external components config changes right away, without requiring the project to be reopened first.
Now you can use ENTER, SPACE, and TAB to interact with dialog options.
Editing text on stage now starts where you click, and not at the beginning or end of the word.
Bug Fixes
Fixed an issue in on-stage text editing where pressing the SPACE key to add a space could result in clicking the element instead.
Fixed an issue where, in CSS files, after commenting, adding a new property would not start a new line.
Fixed an issue where new CSS variables would only appear in Codux after the project is reopened.
Fixed an issue in the Computed Styles panel where navigating to styles inherited from a third party component would lead to the wrong selector.
Fixed an issue where, when sharing an empty project, we showed the wrong error message.
Fixed an issue with navigation from the Computed Styles panel to the Styles panel when there’s only one style file.
Fixed an issue where Edit in Styles Panel in the Computed Styles panel didn’t navigate to the relevant section.
Fixed an issue where, after deleting a style file, the classes controller would still offer suggestions from that file.
Fixed an issue where class creation failed when another element was selected.
Fixed an issue where, in certain CSS in JS libraries, board thumbnail rendering did not include the CSS styling.
v15.28.0
5 June 2024
New Features
Codux now allows editing a selected text node directly on the stage.
Improved
The Computed Styles panel now always indicates the true height and width of the selected element.
Codux now supports using the arrow keys to increment/decrement unit inputs, even when the input is empty.
Clicking on an empty area outside the stage now deselects any selected element.
Codux now correctly displays the status of non-git repositories.
The variables picker in the Styles panel is now resizable, handling long variable names better.
Added the ability to see the full list of local changes directly from the git actions menu.
Codux now highlights the currently-applied variable when displaying a list of variables in the Styles panel.
The Elements panel now behaves more predictably after the currently-selected element is deleted.
The background controller now filters variables, and only shows colors and gradients.
Added “go to code” button for the currently-selected selector.
Bug Fixes
Fixed an issue where inputting curly-brackets into the Properties panel inputs could cause unexpected behaviors.
Fixed several visual bugs related to the on-stage distance indicators.
Fixed an issue where Styles panel inheritance indicators would point to the wrong selector for CSS shorthand properties.
The Codux stage now recovers better from errors in the code without having to manually refresh.
Fixed an issue in Codux Online where SVGs were treated as images, ignoring the “style” property, and were rendered incorrectly.
Fixed an issue where the context menu shown in the Computed Styles panel were inconsistent with the rest of Codux.
Fixed an issue where Codux would crash in certain cases if you try to update while also logging in.
Fixed an issue in the Online Editor where newly-added CSS rules would not appear on a new line.
Fixed an issue where a component with only uppercase characters could break board rendering.
Fixed an issue where, in certain cases, class names could not be applied to Radix components despite being present in the component interface.
Fixed an issue where, when using CSS custom properties in the Corners controller, Codux would sometimes crash.
Fixed an issue where, in the margin and padding controllers, the lock/unlock button produced unpredictable behaviors.
Fixed an issue where having a space or digit at the start of a media file name could cause unexpected behaviors in the Media Manager.
Fixed selector quick view so that it no longer disappears when hovered on.
v15.27.0
21 May 2024
New Features
You can now jump into various tutorial videos directly from the Codux Project Picker.
Improved
Following extensive work behind the scenes, startup time and overall performance have improved.
Bug Fixes
Fixed an issue where the “Sync Selection” feature would make the Code Drawer jump to the wrong location while editing the code.
Fixed an issue where drilling into a component did not update the selection scope properly, leading to editing actions being performed in the wrong location.
Codux will now always offer the empty default template even if user-project templates are used.
Fixed an issue where hovering over different selectors in the Style Panel would cause overlapping tooltips to appear.
Fixed an issue where creating a new board following the creation of a new component, would lead to unexpected results.
Codux is now more tolerant of unknown fields in the codux.config.json file.
Fixed an issue where the Classes input would not work when using the “Enter” key after selecting a target new file for the class.
v15.26.0
7 May 2024
New Features
With a new visual controller, you can now easily manipulate the position of a grid's child element.
Improved
Git commits in commit history are now clickable so you can view the commit directly in your browser.
Now, when you click a file in the Changed Files list, it will open its diff in the built-in code editor.
Added support for Vite SVGR version 4.2.
The Styles panel now displays and lets you edit CSS custom properties (CSS Vars) in the Others section.
Improved how default browser style values are displayed in the toggle and input visualizers.
Introduced a new status to user run scripts, indicating whether it was stopped manually while running.
Projects deployed online using Codux by other users can now be “saved” under your account, for you to edit.
Bug Fixes
Fixed an issue where interacting with component parts outside of the component boundaries didn't work.
Fixed an issue where the unit dropdown in the Styles panel could get cut off from view.
Fixed an issue where the search bar lost focus after the first character was entered.
Scanning for new components now also removes deleted components from the components list.
Fixed an issue where in some cases scrolling to the Style Panel from the Computed Style Panel resulted in the wrong location.
Fixed an issue where in some cases the Elements Panel would incorrectly display the content of components returning a Fragment at the top level.
Fixed an issue where in some cases highlighting children in the code using the “Show in code” option would not highlight the entire range.
Fixed an issue where in some cases when using Firefox in the online version of Codux the selector list would not populate.
Fixed an issue where applying tailwind directives ended up in the wrong order as a CSS class in the same file.
v15.25.1
5 May 2024
Bug Fixes
Fixed an issue concerning logging in to GitHub using Codux.
v15.25.0
17 April 2024
New Features
We added an eCommerce Starter template that uses Wix Headless as the back office for managing your eCommerce site.
User agent styles are now accurately displayed in the Styles panel.
Codux can now run shell scripts in the background so you can continue your work without interruption while your scripts are running (particularly useful for scripts that have long execution times or never complete).
Bug Fixes
Fixed an issue where stage zoom would jump towards the top-left when zooming in.
Fixed an issue where the names of some elements in the Elements panel disappeared when changes were made in the code drawer.
Fixed an issue where a class expression tooltip would not get updated when the expression was modified.
v15.24.0
3 April 2024
New Features
Codux now offers an easier way to log in – through your default web browser.
We introduced the ability to add style variables (whether they’re CSS custom properties or preprocessor build time variables) from common style files in the same way that common classes are added – through configuration.
We introduced the ability to view the code of any style variable in the project.
We’ve added a new import button to the media gallery so that you can browse for new assets to add to your project.
Improved
We standardized the display of Styles panel empty states so that classes and selector controllers no longer disappear, but become disabled when they aren’t usable.
Boards are now more performant when refreshing in between changes.
Board settings have returned to the more intuitive left side of Codux.
Codux now shows context-related controllers in the Styles panel based on the computed value of the CSS Custom Properties (CSS vars).
The Codux Styles panel now better reflects the usage of CSS vars.
Styles panel inputs for margins and padding now support typing the unit in addition to selecting it through a dropdown menu.
The Styles panel is now more performant when navigating through it by mouse.
Bug Fixes
Fixed multiple memory leaks and performance issues in Codux (particularly with file system synchronization changes).
CTRL-W no longer closes Codux when focused on the code drawer (or when the project picker is open).
Fixed an issue where in some cases, it wasn’t possible to drill into a component with nested elements.
Fixed an alignment issue when the Styles panel reached an empty state.
Fixed an issue where, when sharing projects in Codux, the node_modules folder was included when .gitignore did not exist.
Codux no longer mistakenly allows users to change the running NODE_ENV mode (doing so would affect Codux functionality in different ways).
The Styles panel visualizers no longer appear disabled when its value is a shorthand containing CSS vars.
Fixed a bug where the stage handles could overlap with other elements of the Codux UI.
Codux no longer opens a popover message when a property value is not inherited.
Fixed an issue where undo-redo after deleting board content broke styling unexpectedly.
v15.23.1
21 March 2024
New Features
Codux Online now includes the same built-in media manager as the desktop app to visually manage the assets in your project.
Our brand-new YouTube course Codux 101 for Designers is now live!
Codux now automatically scans (in the background) for components in your projects and shows them in the Home page component list.
Improved
We’ve standardized and improved our Styles panel UI and messaging when there aren’t any styles to edit for the currently-selected element.
Codux now warns users when failing to locate a package.json file in the project root.
Imports are automatically updated for assets that have been renamed and/or moved.
Codux now recovers better from the handling of broken CSS syntax, both in functionality and in error messaging.
Bug Fixes
Fixed an issue in the Styles panel where styles were not disabled when selected on a Fragment element.
Fixed an issue in the Elements panel where dragging an element over many other elements resulted in unpredictable behavior.
Fixed several zoom-related issues around keyboard shortcuts.
Fixed an issue where TypeScript failed to compile files with extensions .mts, .cts, .mtsx, and .ctsx.
Fixed an issue concerning loading static assets using the codux.config.json configuration key
staticServerRoot.Fixed an issue where a project image preview didn’t show in the background style property controller when the image URL needed resolving.
Fixed an issue related to Sass file resolution when codux.config.json settings were changed.
Fixed an issue where the common styles file configuration didn’t work as expected on Windows.
Fixed issue with resolution of svg files with query param
v15.22.2
10 March 2024
New Features
Project images and SVGs can now be added directly from the Add Elements panel, or the new image visualizer in the Properties panel. You can now visually choose to use any of the project’s images or SVG.
The Elements panel actions menu now contains the option to wrap the selected element with a DIV.
Codux now includes built-in layouts that you can use in your project.
We’ve added a new login flow for Codux Online which includes the ability to share changes made online.
Improved
Added collapse-all functionality to the Elements panel.
Made the stage ruler measurements more meaningful.
We moved the online editor to a new domain - web.codux.com.
Bug Fixes
Fixed an issue where color pickers could be cropped by the panel’s edge.
Fixed an issue where elements that were rendered as a result of passing children from a different scope would result in an empty Styles panel.
Fixed the visual indication in the Elements panel when an element accepts children.
v15.21.0
25 February 2024
New Features
Codux now includes new configurations for common CSS files and suggests class selectors from them in the classes controller. When a new class is created, the common files are offered as a possible save destination.
Codux will now automatically create a stylesheet for boards if a new class is added to the board file.
The Properties panel now prioritizes key properties for quick access, with options to view all properties and search the full list as needed.
We’ve introduced login and share functionality to Codux Online.
Improved
When selecting a component, Codux now selects its first element rendered on the screen based on its computed styles.
The Elements panel now displays editable data visualizations, allowing for easy modification of rendered Arrays and Objects.
Codux now ensures proper imports of CSS modules when using a selector from those modules.
Updated some Styles panel empty state messaging and behavior. For nodes in the Elements panel that are not real DOM elements, the default behavior is now to select the parent node instead of the non-existent node.
Codux now auto-selects the root node of the component when changing scope.
Now, when you press Enter on a unit number input in the Styles panel, the value kicks in.
Number unit input now supports the keyboard's Up and Down keys to increase and decrease values.
Bug Fixes
Fixed an issue with stage interaction, where changes to the state of a conditional node in the Elements panel wasn’t reflected properly.
Fixed an issue where, when deleting a classname through the code editor, the classes panel wouldn’t always reflect the changes immediately.
Fixed an issue where invalid JSON in codux.config.json could prevent further rendering in Codux.
Fixed an issue where if, in the Computed Styles panel, a value was inherited from a different scope, navigation to it would fail without error. Codux now navigates to the right scope properly.
Fixed an issue where, after a compilation or dependency resource becomes invalid, after fixing it, Codux still would not recover from the error until the stage is refreshed.
Fixed an issue where the boards scrollbar wasn’t reachable by mouse.
Fixed an issue where Codux would crash when attempting to share a project online without having a Git repository set up.
Fixed an issue where in some cases Codux would not show the correct dragging indication to an element’s children.
v15.20.0
11 February 2024
New Features
You can now reveal a file from the Files panel in your operating system’s file explorer/finder.
Improved
Updated the icon for viewing code in your external IDE in the Elements panel.
Updated gap visualizers in the Styles panel with an improved locking mechanism, and the ability to type units instead of just selecting them.
Bug Fixes
Fixed an issue where using a SCSS variable made available through Board Global Setup did not automatically add the import in the component, resulting in a compilation error.
Fixed an issue where the component render didn’t immediately reflect changes made in the code after recovering from an error.
Fixed an issue where, when running Vite npm scripts, the CLI output was showing an ANSI escape code instead of a human-readable message.
Fixed an issue where elements passed to a component as children had improper actions in the actions menu.
Fixed an issue where string attributes looked like expressions in the Elements panel.
Fixed an issue where the row-gap and column-gap properties could not be properly deleted.
Fixed an issue where, in some cases, Codux configuration didn’t properly load, resulting in a default fallback being used instead.
Fixed a board scrolling issue.
v15.19.0
28 January 2024
New Features
Grid size indications for rows and columns now show on the editor stage.
The Codux code drawer now supports automatically adding missing imports.
Improved
Codux now suggests only relevant CSS variables based on the styling solution in use.
The Styles panel inputs for width, height, min-width, min-height, max-width, max-height, font-size, line-height, letter-spacing, top, right, bottom, and left now support typing the unit in addition to selecting it through a dropdown menu.
Bug Fixes
Fixed an issue where the cached thumbnail of a board file remained even after the file was deleted.
Fixed an issue where navigation from the Computed Styles panel to the Styles panel was not functioning correctly when a text node was selected.
Fixed an issue where using a non-existent variable in the CSS resulted in an unexpected parsing error.
Fixed a Firefox-specific issue in the online editor that caused undesirable horizontal scrolling in the margins and padding controllers.
Fixed an issue where changing the CSS of an element caused the selection frame to display an incorrect position or size.
Fixed an issue where updates to the DOM were not immediately reflected in the selectors dropdown.
Fixed an issue where, while using the click-to-add feature, elements were being added to an incorrect board.
v15.18.2
21 January 2024
Bug Fixes
Resolved an issue where some projects could not be shared after a board was deleted
Resolved an issue where temporary cache files remained after sharing the project
v15.18.1
16 January 2024
New Features
Added a new single page application template named “Website starter” which includes React Router routing to easily start building your application.
Overhauled Codux’s type recognition mechanism, opening the door to much larger project support and component libraries like Bootstrap, MUI, and more.
Improved
Enhanced the hot-module reload mechanism for CSS, boosting the Styles panel performance. Expect smoother interaction now, with less jumping and stuttering.
Codux Online now persists changes after refresh.
Template-string expressions in class names are now highlighted.
Window sizes and resolutions on boards were updated to include more relevant screen size options.
The States controller in the Styles panel now supports adding and editing pseudo-selectors in projects using CSS Modules.
Codux now shows an error message when a project’s Tailwind config file is not valid.
Bug Fixes
Improved the board thumbnail-caching mechanism.
Fixed an issue where editing a board file’s code would make the Styles panel flicker.
Fixed an issue in Codux Online where props were not sorted properly.
Added support for Prettier v3.
v15.17.2
24 December 2023
New Features
Codux now supports Tailwind plugins, increasing our coverage to projects that use Flowbite and DaisyUI.
Added a new portfolio template that uses Strapi as the CMS, React router for routing needs, and includes Framer Motion and Radix UI components.
Improved
The Styles panel is now the default panel when selecting an element of any kind.
Added visual aids to differentiate class names that originate in expressions, and those that are conditionally visible on the element.
Improved our className attribute formatting capabilities to better match project configuration.
Grid indications now also show up when selecting a child element in a grid.
Added support for package-lock.json v3.
Codux Online now enforces minimum browser versions.
Added additional keyboard navigation while in the Elements panel.
Improved the string-type visualizer in our controllers to better support long strings.
Codux resolver now supports custom resolver conditions.
Bug Fixes
Fixed an issue where CSS properties didn’t appear correctly in the Others section.
Fixed an issue where exiting Codux on Windows machines could cause an error to appear.
Fixed an issue where the empty state of the Styles panel on children passed into a component as props was blank.
Fixed an issue where external changes were not immediately reflected by the selectors dropdown.
Fixed an issue where some expressions didn’t show in the Elements panel.
Fixed incorrect parsing of Stylable states in the classes controller.
v15.16.2
17 December 2023
Bug Fixes
Fixed an issue where running Codux behind a proxy/firewall could cause a crash to happen.
v15.16.1
12 December 2023
New Features
Added Media Queries indication to the selector information tooltip
Improved
Improved thumbnail rendering speeds!
Improved selector categorization - now there’s differentiation between global and shared selectors.
Improved Elements panel and stage with new, advanced keyboard shortcuts to select and move elements. See all Codux keyboard shortcuts here.
Direction of flex alignment controllers are now aware of row vs column layouts and arranged accordingly.
Improved the way grid rows and columns are added through the Styles panel.
You can now drag into a collapsed element in the Elements panel that has no children.
Bug Fixes
Fixed an issue where Place Items controllers were incorrectly shown under flex self layout.
Disabled spellcheck in Styles panel inputs.
Fixed an issue where the Codux update notification was pushed from the foreground while still open.
v15.15.0
22 November 2023
New Features
On-stage grid representation now lets you visually perceive the appearance of the grid being styled, including both cells and gaps.
Added a new project template utilizing the Semantic UI component library.
Improved
Improved board thumbnail loading times.
Improved the way we expose CSS inheritance in the Styles panel.
Improved the indications for the navigation between the Computed Styles and Styles panel.
Improved the way we handle className syntax (using className objects vs. strings, depending on project configuration).
When deleting a class or selector of an element, remaining selectors can now be auto-selected.
SCSS variables can now be detached like CSS custom variables.
Added the “common/shared” CSS selector category, and an icon to represent it.
Self Layout now opens flex or grid, based on the parent display property.
Bug Fixes
Fixed an issue where the input units changed unexpectedly in the Styles panel.
Support for the CSS @import directive now works as expected.
Fixed an issue where, while renaming an element, the element remained selected, preventing text selection.
Fixed an error caused when trying to upload projects based on Create React App to the online playground.
Fixed an issue where clicking Enter after adding a new class didn’t add the class in some cases.
Fixed an issue where adding a class to a component would drill into the component.
Codux won’t let you drag an element into itself anymore.
v15.14.0
8 November 2023
New Features
Added Tailwind support for Online Playgrounds.
Improved
Improved the selector categorization mechanism to include more categories, and to expose them.
Improved the selectors dropdown to include the source file of each selector.
Improved navigation from Computed Styles to Styles panel (fixing several mistakes related to navigation in the process, and putting safeguards in place to prevent invalid navigation in the future).
Improved error messaging for Online Playgrounds share failures.
Improved the CSS resolution mechanism to include third party style imports.
Improved the visibility of expressions, repeaters, and conditions in the Elements panel so that the actual expression code is visible in the panel with the relevant icon.
Made the controller for the Display property in the Styles panel more intuitive.
Bug Fixes
Fixed an issue where the first class added to a component didn’t have a target file for its selector in some cases.
Fixed an issue where dragging raw text into a self-closing div element resulted in invalid JSX.
Fixed an issue where, when creating and giving a new project a name, invalid characters were permitted but then produced strange results.
Fixed issues with scroll behavior while in Select (edit) and Preview (interaction) modes.
Fixed an issue where using some Styles panel inputs could result in the entire panel scrolling out of position.
v15.13.0
22 October 2023
New Features
We changed the CSS class management UI to be more user-friendly. Now it’s easier to find and interact with existing classes, create new ones, and navigate them using the keyboard.
We added rich content for the Nivo component library. See here for setup information.
Improved
Increased the supported repository size for online playgrounds to 100MB.
The Elements panel now shows the correct success or failure result for a ref inside a trinary.
Bug Fixes
Fixed an issue where navigation from the Computed Styles panel to the Style panel led to the wrong selector.
Fixed an issue where the CSS error message wasn’t styled correctly.
Fixed an issue where after drilling into a component, the component root wasn’t automatically selected.
Fixed an issue where Computed Styles and board CSS would not automatically update on style changes.
Fixed an issue where, if a component had autofocus enabled, it would prevent editing its code through the code drawer.
v15.12.0
1 October 2023
New Features
Codux now provides ready-made component variations of Nivo, a charts component library that can be added to the Add Elements panel to be used in your project. See here for information on adding it.
Introducing a new section in the Add Elements panel that offers guidance on installing and utilizing third-party libraries that we provide content for.
Improved
Improved the CSS properties search.
Added SVGR support to online playgrounds.
Prettier integration now uses the project’s own Prettier version instead of Codux’s.
Bug Fixes
Fixed an issue where invalid boards weren’t properly identified in the UI.
Fixed an issue where the wrong CSS was selected when clicking View Code while the CSS code tab wasn’t active.
Fixed an issue where, in certain components, board thumbnails wouldn’t render correctly due to a race condition.
v15.11.0
18 September 2023
New Features
Boards are now visible and rendered in the Add Elements panel, and can be dragged onto the stage or added with a simple click. If a board has a cover image, the cover image will be used instead.
DIY Playground (Share): Collaborate effortlessly with Codux's new Share feature! Transform your boards into dynamic hubs of creativity, accessible to anyone. Showcase your component library, get feedback, and collaborate with designers and non-technical staff. Click Share in Codux now!
New Selectors GUI: We’ve overhauled our selectors UI to allow a faster and more efficient workflow.
Improved
You can now pin and unpin the Add Elements panel, allowing you to keep it open when you need to add multiple elements.
We’ve improved the Add Element panel’s search capabilities with Fuzzy Search, ensuring that you get relevant search results even when using imprecise search terms.
We’ve turned “Fit to screen” into a toggle, allowing the stage to automatically adjust its size when the rendered area is resized.
Improved the UI and messaging relating to the Styles panel’s empty-states (when no selector is selected).
Added new icons and colors for boards to differentiate them from components in the Add Elements panel.
Bug Fixes
Fixed the display of all text items resolving from functions.
Fixed an issue where, when dropping a component into the Elements panel, a component was indicated in addition to the placeholder for its children. Now only the placeholder for the children is indicated.
Fixed an issue where adding and removing a board from the Add Elements panel created an inconsistent list of boards.
v15.10.0
30 August 2023
New Features
A new section has been added to the Add Elements panel (under Components), presenting a comprehensive list of all the boards within your project to effortlessly include in various other boards and components.
Added support for opening WebStorm via the “View in IDE” button.
Keyboard navigation options have been added to the Add Elements panel, allowing users to navigate the panel using keyboard shortcuts like tab, arrow keys, and enter.
Improved
Added new tooltips to components in the Add Elements panel that display their path.
Optimizations to rendering Stylable projects.
Bug Fixes
Fixed an issue where the Elements panel did not properly display class names on first render of a board.
Fixed an issue related to creating a board with the “empty” template.
Fixed an issue where boards created in an external IDE wouldn't appear in the Home screen until restart of Codux.
Fixed an issue where the board thumbnail size became out of sync in some cases.
Improved visibility for the “New component” button in the Add Elements panel.
Fixed an issue where dragging an element would change to the wrong selection in some cases.
v15.9.1
Bug Fixes
Fixed issues with Sass in create-vite projects.
Fixed issues with libraries that use babel-runtime.
v15.9.0
20 August 2023
New Features
Codux now provides ready-made component variations of the Semantic UI component library which can be added to the Add Elements panel to be used in your project. See here for information on adding it.
As part of our ongoing effort to make adding board content to the Add Elements panel easier and more intuitive, all new boards will now be shown in the Add Elements panel by default.
Improved
Codux now displays unparsed classes from expressions, allowing users to better understand where applied styles are originating from.
If boards aren’t valid for use in the Add Elements panel, you’ll now know about it right away in the Board Settings panel beneath the show/hide from Add Elements panel toggle switch. There will also be a red dot on the Board Settings panel icon to indicate this. It will still appear in the Add Elements panel even when invalid.
Added support for
import.meta.env.
Bug Fixes
Fixed an issue where auto-scrolling to the right position wouldn’t work when moving from computed styles to editing a style.
Fixed an issue where Codux entered an undetermined state as a result of mismatched Prettier plugins.
Codux now supports selectors with escaping, and no longer considers them invalid.
Fixed an issue where sync selection would persist even after manually selecting text in the code drawer.
v15.8.0
6 August 2023
New Features
The react-board dependency has been updated, users will be required to update it when opening an existing project.
You can now reuse boards inside one another via the Add Elements Panel. Toggle “Show in Add Elements panel” in a board’s settings tab in order to mark it for reuse in other boards.
Codux now supports projects that use the exports field in package.json
A new template project has been added, “Coducks” using Tailwind CSS and Radix-UI.
Improved
Keyboard shortcuts have been added to quickly navigate and select from the elements panel! Refer to Codux Keyboard Shortcuts for a complete list of shortcuts.
All items in the elements panel can now be collapsed by pressing CTRL+⇦ on Windows, or ⌘+⇦ on Mac.
Clicking an element in the Add Elements panel will now add it as the child of the currently selected element.
Hovering over components in the add elements panel will now display a tooltip to letting you know if the component has boards or not, and if it may be invalid for reuse
Bug Fixes
Fixed an issue where the chosen selector was no longer selected after refreshing the stage.
Fixed an issue where focus would jump to the code-drawer upon drilling into the elements panel.
v15.7.2
23 July 2023
New Features
"Sync Selection" follows and highlights code based on real-time UI selection.
Codux now reacts to configuration changes in codux.config.json right away – no need to reload the project or Codux anymore!
Bug Fixes
Fixed an issue where you could not drag text into an empty root node.
Fixed an issue where selection frames did not appear in the correct location due to scroll.
Fixed an issue where dynamic import of Tailwind config did not work properly on Windows machines.
Fixed an issue where Codux running on M1/M2 (ARM) Macs would upgrade to the Intel version of Codux instead of the ARM one.
Fixed the ability to drill into an empty component from a parent component.
v15.6.1
16 July 2023
New Features
Codux demo projects featuring Blueprint library components now offer an array of rich content in the Add Elements panel, representing diverse component behaviors and usages. You can add Blueprint rich content to existing projects by following the instructions for adding external library rich content to boards here.
The online Codux editor has a new UI and loading mechanism for projects.
You can now open the Add Elements panel using the ‘A’ key when you have an element selected in the Elements panel. We’ve also added the ability to collapse and uncollapse nodes with the keyboard.
You can now see the biggest highlights of what’s new in Codux right after you upgrade to the new release! Just update Codux as you normally would and you’ll see the announcement when you open the new version.
Improved
The Codux resolver now supports files with .cjs and .mjs file extensions in addition to: .ts, .tsx, .js, .jsx, and .json.
Codux now supports nested media query rules in SASS.
Bug Fixes
Fixed a visual bug in the online editor where the widget’s '?' button and download button overlapped.
Fixed the ability to delete the root element in the Elements panel.
Fixed an issue where the Tailwind configuration file was not properly evaluated in certain cases, and required a restart of Codux.
Fixed an issue where dragging on stage would not work in cases where a component appears in the code, but doesn’t render on the stage.
v15.5.0
26 June 2023
Improved
The Properties panel now implements an improved sorting mechanism, sorting properties and HTML attributes by importance, making them more readily accessible to work with.
Introducing several text-related messaging improvements to property empty states, branch naming, breadcrumb tooltips, and the Codux Updater.
Bug Fixes
Fixed some icons for Safari browsers.
Fixed some issues with projects using React versions 17 and 18.
Fixed an issue related to leaked process.env.NODE_ENV VS Code instances, where npm i didn't install all the correct dependencies.
Fixed Tailwind support for projects using ESM module format (Vite).
v15.4.4
12 June 2023
Bug Fixes
Fixed incompatibility with new SASS version (1.63.x).
v15.4.3
7 June 2023
New Features
Reworked the Elements panel to provide a new design and experience, with improved code insights (conditionals, repeaters, children, and other expressions) for better clarity.
Moved the Window and Canvas nodes from the Elements panel to a new dedicated Environment panel.
Improved
Improved the description for the Properties, Styles, and Computed Styles panels when selecting expressions and text nodes.
Improved the drill-in icon to better show on screens with different pixel densities.
Improved the experience of renaming files in the Files panel.
Bug Fixes
Fixed an issue where it was possible to drag elements when a board was in an invalid state.
Fixed a performance issue when working with third party libraries in the Add Elements panel.
Fixed an issue where certain flows in Tailwind projects could cause the stage to crash, requiring a refresh.
Fixed an issue where the Properties panel and/or built-in code editor would fall out of sync, causing types to be "any" and errors to be shown.
The Add Elements panel now closes when switching back to the Home tab.
v15.3.1
1 June 2023
Bug FIxes
Better handling for "@babel-runtime".
v15.3.0
14 May 2023
New Features
Codux has a new logo! Quack quack!!!
Improved
The Add Elements panel search mechanism works better.
The Add Elements panel now keeps its state (search, drill down, position), so when it is closed and reopened, it returns to how it was previously.
The Add Elements panel is now resizable.
The Add Elements panel now supports hierarchy, so that elements can be grouped together.
Improved CSS processing performance.
Improved the text labels in the New Project screen.
Added ES modules to all configuration files.
Added support for moduleResolution: “bundler”.
Added support for Vite’s
publicfolderAdded support for relative paths in
codux.config.json.
Bug Fixes
Fixed empty state messages in the Properties and Styles panel.
Fixed some edge-cases in the Tailwind class auto-completion mechanism.
Fixed an issue where, in some operating systems, Codux couldn’t find some components, causing them to be grayed out in the Elements panel.
Fixed some mouse cursor issues.
Fixed some performance issues related to the Files tree.
v15.2.1
4 May 2023
Bug Fixes
Fixed an issue where drilling into a fragment in the Elements panel was malfunctioning.
v15.2.0
4 May 2023
New Features
Added Tailwind-related functionality to the built-in code editor, including: auto-completion, correct sorting of classes, hover to reveal CSS info, and more.
Improved the product prerequisites installation detection for Node.js and Git.
The Codux configuration file codux.config.json now supports using relative paths.
Improved
A new UI for the Projects screen now allows easy access and navigation to existing projects, new project creation, and product tutorials.
The Properties panel has been updated to display the most pertinent properties of the selected element at the top of the panel. For example, upon selecting a component, the interface’s props will be situated at the top. This functionality has also been incorporated into third-party components in this release.
Improved the default naming convention for board names to create a clear separation between boards and components, and to achieve a faster workflow.
The Escape key now stops dragging actions.
Improved the experience and functionality of the built-in code editor: added fuzzy search for file paths, added highlights in the file tree for the currently opened file, improved CMD+click navigation in the code, and fixed some bugs with type definitions.
Improved error message for ‘no results found’ in the Computed Styles panel.
Bug Fixes
Fixed a minor bug related to the window title.
Improved Electron error logging.
Fixed the code editor “stealing” focus from other UI elements.
Fixed edge cases related to working on inline styles with Styles panel.
Fixed an issue where a thumbnail didn’t show correctly after undoing the deletion of a board.
Fixed an issue where the option to create a pull request was disabled for new projects.
Fixed an issue where changes to the JSON file being imported into a board didn’t appear until refresh.
Fixed an issue where drilling into a recursive component produced unexpected behavior.
Fixed an issue where the layout props in the Styles panel also appeared in the Others category.
Fixed an issue where unclickable elements in breadcrumbs got the wrong mouse cursor.
Fixed the desktop icon for Linux distros.
Fixed an issue in the Computed Styles panel where borders were shown incorrectly.
Fixed an issue where a dialog didn’t close as expected when creating a new folder.
Fixed an issue where Tailwind configuration would only apply after relaunching Codux.
v15.1.0
29 March 2023
New Features
Codux now includes initial support for Tailwind CSS! You can easily configure and apply Tailwind CSS styles as you’d normally do in code, and see them reflected in your Codux Boards. See here for more details.
You can now edit a component’s structure from the stage by dragging and dropping, making it easier to add and arrange components.
We’ve added quick-start templates to Codux! Now, when you choose to create a new project, you’ll be able to not just choose from blank templates, but also use one of the templates we made with example components to get you started on your new project.
Codux will now create a styling file when you try to add a class and there’s no related style file to save it to. All you need to do is set your styling solution in codux.config.json using the new solution key.
We introduced the ability to import Style variables (CSS, Scss, Stylable) using the global board setup configuration. Now you can use global variables in all components and scopes of your boards, even if they aren’t already imported (they will be automatically imported if used). See here for more information.
Improved
When creating a new component, Codux will now be drilled-in to the scope of the component and not its board.
We've made some changes to the way empty state texts are displayed in the Styles panel.
We added support for new behaviors introduced in Sass 1.59.x.
We improved the way that the Computed Styles panel appears when there are no styles to view.
Codux no longer shows child props for components that don’t have any.
We introduced a shortcut that lets you double-click on a text node to go straight to the Properties panel where it can be edited.
Codux now has new icons and styling in the file explorer!
Context menus should now behave more consistently.
Bug fixes
Fixed an issue where creating a project with a space in its name or path led to an error.
Fixed an issue related to a dubious ownership error that sometimes occurred while using Git.
Fixed an issue where a selector tooltip stayed open after scrolling.
Fixed an issue where the opacity property value in the Styles panel was partially cut off.
Fixed an issue in the code drawer where the ‘go to definition’ preview action was blank.
Fixed an issue on the stage where the correct position of the canvas frame wasn’t always shown after it was changed.
v15.0.1
22 February 2023
Bug Fixes
Login related bug fixes.
v15.0.0
21 February 2023
New Features
Deprecated support for node-sass.
Added a new project template for Vite projects.
Added a link to the Codux video tutorials site to the top menu.
Added initial support for projects that are using the pNPM package manager.
Added a diagnostics tool for users encountering issues while Codux checks that the correct versions of Git and Node.js are installed.
Added optional configuration to specify Node.js and Git binary locations, and the shell for Codux to use.
Improved
You can now open the relevant code editor tabs when drilling into components in the Elements panel.
Components now maintain their state when a board is refreshed or re-rendered.
Optimized performance when rendering boards.
Added the Open in VS Code menu option to context menus and panels across Codux.
Props in the right panel are now ordered based on their relevance to the selected component.
Adjusted the sorting of items in menus across Codux.
Updated the icon for block elements.
Modified some tooltip texts to make them clearer.
Updated the styling for when locking a shortened CSS property controller in the Styles panel (such as padding, margin, etc.)
Components on the stage are now highlighted with different colors to represent their type.
The boards gallery now loads faster.
Added the ability to create new components from the Add Elements panel.
Improved the styling of breadcrumbs on the left side on the UI.
Updated the styling of the Edit Component button in the Elements panel, to make it more easily visible.
Optimized Styles panel performance.
Improved indications when dragging elements in the Elements panel.
Bug Fixes
Fixed an issue where the canvas was selectable when trying to select elements on the stage
Fixed an issue where spaces in paths could break compilation.
Fixed an issue where deleted files would be suggested when creating new classames.
Fixed an issue where conditional classes would always appear disabled.
Fixed an issue where functions could be detected as components if they returned JSX elements.
Fixed an issue that sometimes occurred while undoing a change after switching branches.
Fixed an issue where commits wouldn't work if name and email were not configured in the global Git config.
Fixed an issue where some environment variables would be overwritten by Codux.
Fixed an issue where committing with Git wouldn't work in some cases.
Fixed issues related to reverting changes in a monorepo.
v14.2.4
22 January 2023
Bug Fixes
Fixed an issue where in certain situations, our prerequisites installer didn’t find the already-installed version of Git.
v14.2.2
18 January 2023
New Features
Codux now uses the project's Prettier configuration to format code (both when called by the user, or when called by an editor action). Refer here for more information.
Codux now includes indicators throughout the app that provide context-sensitive help through our help widget
We added a search feature to the Styles panel to help you find properties and values easier than before.
When selecting elements from the stage, you can now step-out to the parent scope from a child component by double-clicking outside the currently-selected element.
Codux now categorizes selectors better, and auto-selects a “safe” selector when opening the Styles panel to make the styling experience easier and more intuitive.
You can now clone from any Git provider without first having to log in to your Git provider’s account through Codux! If it’s a public repository, it will just work. If cloning from a private repository, make sure you set up an SSH key, and that you have the correct repository permissions before trying this out.
We’ve added an experimental feature that lets you open a selected element directly in Visual Studio Code through the context menu in the Elements panel.
Improved
We removed the unnecessary “no classes” indication when an element is selected in the UI and has no classes.
We optimized the gallery view to improve rendering time of boards.
We now use the board file name as the default code file tab title for more clarity.
We added a description to the “successful clone” dialog to help users better understand that their clone was completed successfully.
We changed the size of the Home tab to make for a more intuitive navigation experience.
We changed Codux to use a dynamically-allocated, system-assigned port (localhost) instead of a predefined one to avoid any collisions.
Bug Fixes
Fixed an issue where the wrong visualizers were added to the “Others” style properties section.
Fixed an issue where two tabs could appear in the code drawer for a single file.
Fixed an issue that was preventing the contextual panel from displaying correctly after component or board was deleted outside Codux
v14.1.0
28 December 2022
New Features
Added initial support for inline styles.
Added initial support for the classNames library
Improved
Improved the general UI and navigation in Codux, the main editor view, the left navigation panel, the Home page, and the components list.
Made a number of improvements to the stage so that boards reflect the undoing of new file creation quicker.
We improved the way toast messages and content in other areas show up in Codux.
Improved how the board recovers from errors.
Improved completions for CSS/Sass in the code editor.
File tree root node now expands by default.
Bug Fixes
Fixed a bug in the Style panel where background layers appeared more than once.
Fixed an issue where computed styles only showed after drilling into an element.
Fixed an issue related to NodeJS identification.
Fixed issues related to dragging elements in the Elements tree.
Fixed issues related to Git Diff not opening for certain project structures.
Fixed issues in the code editor and code drawer experience.
v14.0.2
18 December 2022
Bug Fixes
Made a number of changes to the preview and editing of components to improve the compatibility of Codux with older Node.js versions.
v14.0.0
5 December 2022
New Features
We are delighted to announce the release of Codux, formerly known as WCS. With this release, we have added several features and improvements to make your experience even better.
The configuration file format has changed from JavaScript to JSON to make it easier to manage and access your project configuration. Refer here for details on migrating existing configuration and on viewing configuration schema.
We’ve added a new walkthrough to help you explore product features.
Added the ability to duplicate an element (on drag).
You can now create pseudoclasses and apply custom styling for different CSS states.
An alert now shows up if you are using an unsupported version of React or TypeScript.
You can now use the Git Revert button to clear all file changes after merging a branch.
GitLab merge requests can now be created on GitLab projects.
Improved
Codux now supports ES modules resolution for importing and exporting modules.
Elements in the Elements tree can now be duplicated while dragging, and drilled into by double-clicking (with an indication when it cannot be drilled into).
Bug Fixes
Fixed an issue where you couldn’t use the keyboard delete key to delete items from the stage.
v13.5.1
6 November 2022
New Features
Added the ability to view the Git diff. Now you can see exactly what changed in your code between commits.
Added support for creating merge requests in GitLab.
You can now zoom into a board by holding CTRL/CMD and scrolling.
Improved
We made some visual changes to the Flex and Grid controllers in the Styles Panel, adding icons, changing controller layouts, etc.
We've added support for import.meta.url in TypeScript.
Updated the create new branch modal to make it more user-friendly.
Bug Fixes
Fixed an issue where reverting changes did not work for projects inside monorepos.
Fixed issues when adding or removing multiple imports at once.
Fixed an issue where the prerequisite installer would fail to detect when Git became nonfunctional after a macOS upgrade.
Fixed an issue where tabs were draggable to the left of the homescreen tab.
Fixed an issue with prompts showing up to update @wixc3/react-board even while the latest version is already installed.
Fixed an issue with the categorization of selectors with pseudostates in the Styles panel.
Fixed an issue where components were re-rendered unnecessarily when scoping out of a broken component.
Fixed an issue where jumping to the next word via shortcut didn't work.
Fixed an issue where shortcuts were not disabled when focused on an isolated render.
v13.4.0
28 September 2022
New Features
Added a link to the release notes in the electron-menu.
Added 'demo project' to the add-project menu.
Added support for variables from other variables in sass.
Improved
WCS now uses ports 5656 and 5657.
Improved styling in the header.
Updated git panel icons in the UI.
Enabled scrolling through lists while dragging items in the elements tree.
Added support for older git versions.
Bug Fixes
Fixed issues in undo-redo.
Fixed an issue with expanding hovered items during drag and drop.
Fixed issues with source-to-dist mechanism.
Fixed an issue where the build-scripts would get stuck after long-running scripts.
Fixed issues in class creation for complex cases.
Fixed an issue where scrolling to the same rule in different boards didn't work as expected.
Fixed text in git dialogs.
Fixed an issue with the range calculation for Monaco code editor completions.
Fixed a bug where CSS parse errors were not being exposed.
Fixed an issue where the scale to fit option wasn't applying the correct value on load.
Fixed text in the style-panel empty state.
Fixed text in board actions and tooltips.
Fixed the text in toast bar when displaying a git https auth error.
Fixed an issue where Flex Controllers were not showing on the style panel.
Fixed an error where projects were created without git support.
Fixed an issue where the right-click menu would open to the right instead of the left when there wasn't enough space.
v13.3.0
8 September 2022
New Features
We're introducing a brand new tutorial project with lessons to teach some of the fundamentals of WCS. You can open the tutorial project directly from the Add Projects menu.
Improved
We've improved tooltips! Now you can see which keyboard shortcuts apply the same action.
Bug Fixes
Fixed an issue related to drilling into components that are used as children of third-party components.
Fixed an issue where external/third party rules were shown in the view when the rules section was collapsed.
Fixed an issue with Monaco (code editor) reformatting.
Fixed an issue where the Add Panel wasn't showing boards when no components were found.
Fixed some rendering issues on reload.
Fixed an issue where the "Edit code" button wouldn't show up when referencing a node that's not available.
Fixed an issue where the Elements panel didn't recognize map as a repeater expression inside conditional rendering expressions.
Fixed an issue where the stage wasn't updating with new selectors after a class was removed.
Fixed an error message for missing component path.
Fixed an issue with CSS classname generation.
Fixed an issue where the Properties Panel didn’t update when a jsx-element was added.
Fixed an issue where the Elements panel remained in scope even after clicking elsewhere.
Fixed an issue in the Styles panel where the wrong visualizer would be scrolled to the first time.
Fixed an issue related to the incorrect resouliution of @import. You can now import Sass files without explicitly specifying the root.
v13.2.1
24 August 2022
New Features
We've added a 'create folder' button to the new project dialog, so you can quickly create one for your project.
A new warning message now appears when trying to push to a repo in an organization that doesn’t have WCS listed as a trusted application.
We've added a new 'Account Settings' button to the user menu to take you to the Wix account management page.
Improved
We've just made some improvements to the readability of our scripts output!
We've disabled editing classes for components that don't have a className prop.
We've added an indication to the Elements panel, so you can see at a glance which elements are locked in a forced state.
You will now be logged out if your session cookie has expired.
We've made it so that the element tree is collapsed by default after 2 levels.
We've added caching to board thumbnails so that they render faster!
Now, when you create a new rule, it will automatically be selected. No more fiddling around with the mouse to select rules.
Bug Fixes
Fixed an issue where non self-closing JSX tags were deleted.
Fixed several Sass import-related issues, including assets imports resolutions.
Fixed an issue where deleting a JSX string expression would cause an error.
Fixed an issue where the selection would not show up for non-active elements in the right bar header.
Fixed an issue where items in the elements tree would not expand if the board didn’t render.
Fixed an issue with changing branches that have big changes.
Fixed an issue with the distance markers on the stage overlays not being accurate when zoomed in.
Fixed an issue with the search where it was case-sensitive.
Fixed a bug where runtime errors were not being shown in the preview.
Fixed a bug with repeaters not working correctly when using a for loop.
Fixed some issues with dragging elements on the stage.
Fixed an issue where after updating react-board, the preview didn’t render.
Fixed an issue where hats could not be clicked.
Fixed an issue where the stage wasn't being updated due to a race condition.
Fixed an issue where element lanes were drawn incorrectly.
Fixed an issue where cyclic objects were rendering the Elements panel unusable.
Fixed an issue where expressions in component props and children were not being accounted for in the Elements panel.
Fixed an issue with the Styles panel where setting the background color on a second class was causing issues.
Fixed an issue where the log count would accumulate when reloading the preview,
Fixed an issue where WCS would leave open processes on Windows systems.
Fixed an issue where local components were not updating when you renamed them.
Fixed the Shadow and Border properties in the Styles panel to now preserve variable expressions.
v13.1.0
31 July 2022
New Features
Added the ability to go back to the project picker by clicking on the ‘wcs’ logo in the top left corner
Improved support for React.fragment
Improved
Better collapsing/expanding behavior when dragging items in the elements tree
Changed icon for the Wix Answers widget
Better error messages for failed class creation
Users are no longer prompted to login to github on startup
Updated some texts in the style panel
Some selector colors have been adjusted
More specific error messages when a new repo can not be created.
Improved styling for markers on the elements tree
React Is not imported into new boards if it is deemed unnecessary based on the tsconfig
Workspace aliases in wcs.config now support sass
Added the relevant tooltip when styles from node_modules cannot be edited
Bug Fixes
Restored Wix Answers widget
Fixed an issue where the “Edit Code” button wouldn't always highlight the desired code.
Fixed an issue where a boards action menu could be cut off by the bottom the screen
Fixed an issue where the wrong message would appear when deleting elements tree nodes.
Fixed an issues where users couldn't drag elements to the bottom the the tree
Fixed an issues where SCSS files wouldn't be compiled correctly if they had an inline comment followed by a use directive
Fixed an issue where the color picker would disappear after typing certain special characters
Fixed the styling for some context menus in the style panel
Fixed an issue where deleting text would trigger deletions in the tree
Fixed performance issues when reloading the stage
v13.0.1
17 July 2022
New Features
WCS now supports projects built with React v18.0.
The application can now use login data from the user’s GitHub account to fill in commit history.
Actions can now be made to elements in a lane (expressions, repeaters, etc).
The presentation of selectors has been improved.
Align and justify CSS properties are even more correct!
Style rule tooltips and tooltip messages have been adjusted to provide better help.
Added new CSS properties for cursor, opacity, margin, and padding.
Included more CSS display editing capabilities for properties.
Users are now prompted to update the required “@wixc3/react-board” package when the user’s package.json file requests an older, unsupported version, or when an older version is already installed.
Third-party components can now be added to a board through the Add Elements panel.
The Elements panel now supports components that return fragments.
You’ll now know if there’s an error in your wcs.config.js file through handy notifications.
To improve source-to-source support, you no longer need to remap packages separately. Now you can use the “workspaceAlias” key!
CSS properties are now hidden until a style rule is selected.
We now support the @Property variable syntax for native CSS.
You’ll find a handy link to report an issue directly from WCS.
Bug Fixes
Resolved an issue related to shadows.
Corrected issues related to account logins.
Inspect mode no longer turns on unexpectedly.
Elements tree issue has been corrected.
Resolved a small inline styling rule.
Resolved issue with the “Close All Tabs” panel so users are redirected to the next remaining panel.
Fixed multiple issues related to scrolling through the elements tree.
Users are no longer prompted to install a prerequisite even when the project doesn’t have a package.json file.
Max-height and max-width style properties no longer result in errors when using the auto keywords.
Text nodes without explicit styles to display now mention that there are no styles to display.
JSX prop placeholders are no longer treated as elements.
Flickering overlay title present on hover has been resolved.
Fixed handling in the UI when the project path is not a Git repository.
Fixed a grid density styling issue.
Fixed some lane coloring.
Issue preventing users from adding classes from unused style file imports has been resolved.
Fixed an issue related to element lanes where only active layers were shown.
Fixed CSS properties spacing.
Fixed a minor spacing issue in the UI.
Fixed an issue where the Remove button of an element selected through the stage wasn’t actually removed.
Toggling the “children” prop and then undoing/redoing the change now successfully changes the code.
Component discovery time was improved dramatically.
Fixed an issue where text pasted from the clipboard was replaced by text color input.
v12.6.3
6 July 2022
Future-facing infrastructure changes
Infrastructure
v12.6.2
9 June 2022
Bug Fixes
Compilation-related bug fixes.
v12.6.1
8 June 2022
New Features
All boards in your project can be viewed together on the newly-updated home screen.
The Elements tree now provides markers for dragging elements into JSX props. It has also been heavily optimized to improve performance and minor UI issues.
Easily install the required “@wixc3/react-board” dependency visually if it's missing.
The “safeMode” config key has been renamed “safeRender”.
Many styling updates have been introduced, including new controllers for margin, padding, and opacity.
WCS now displays helpful information about your development environment and the project dependency versions. Press CTRL/⌘+ I to see it.
Log into WCS using your Wix credentials, and then use your GitHub credentials when you’re ready to sync changes to and from your repository.
WCS will now alert you when a new version is available for installation. Just follow the prompt when it appears.
We’ve added a brand-new help widget to the lower-right corner of WCS, which gives you access to our helpful documentation from right inside the product!
Bug Fixes
Fixed issues when importing WebP/WebM/AVIF assets.
Fixed an issue where state selectors wouldn't reset properly.
Fixed issues when using multiple sub selectors in pseudo-classes.
Fixed some instances where logging in with GitHub didn’t work.
Fixed board margins to now translate to auto if set to 0px.
Fixed pointer-event behavior.
Fixed incorrect selector inheritance evaluation.
WCS now handles package-lock.json version 2 correctly when creating a new project.