You can code your website in Devisto entirely in the browser (or in VS Code when you install our extension). In the left hand side navigation, you can find 4 sections for the different file types we support:
All 4 sections work the same way. There is a tree structure with folders and files, over which you have total control. You can create folders and files and drag them around. When you click a file, you can edit the code in an editor.
When you type in a file, a blue dot will appear in the tree next to the filename, to indicate the file has been changed. Unsaved changes are never lost, even when you refresh the browser. But the changes are only persisted to the project when you save the file, after which the blue dot will disappear. When you have unsaved changes (in which case the blue dot is visible), you can right-click the filename and choose Discard Changes to return to the saved version of the file.
When creating or renaming files or folders, you can use full paths. The path will be respected and non-existent folders will be created on the fly.
So let's say you create a new file on the top level, and enter this in the name field: foo/bar/baz.blade.php. Then this file will be created 2 folders deep (which will also be created automatically if they don't yet exist). Say next you rename this same file and enter foo/new.blade.php, then the file will be renamed to new.blade.php and at the same time be moved to the foo folder.
We integrated the Monaco editor in Devisto for coding. Monaco is the underlying editor of VS Code, which provides all the tools you need for a pleasant coding experience.
You can modify some behavior of the editor and add custom keybindings. Click on the account icon in the upper right corner and choose Editor Settings.
We also try to provide auto completion whenever possible. For example, when you type table(, a list of available table slugs will appear. We also parse your CSS every time it changes to provide autocomplete for class names.