The Project Environment

In this video we look at where an Elements project lives, how to reopen a project in VS Code, how to start the day with `elements start`, and how to work on a project from the terminal. ### 1. A project is a folder An Elements project is a folder on your computer. By default it is in your home directory at `~/elements/projects/<name>`. Open that folder in Finder on a Mac, or File Explorer on Windows, to see the project's files. ### 2. Reopen a project When you open VS Code the next day, it opens the project you were last working on. To open a different project, choose **File > Open Recent** and pick the project. If the project is not in the list, choose **File > Open Folder** and open the project's folder. ### 3. Start the day with elements start The first time you open a project in a day, the app is not running and the browser tab in VS Code shows an error. Open a terminal with Control-backtick, or **Terminal > New Terminal**, and type: ```bash Terminal elements start ``` The app server starts in a moment, and the app appears in the browser tab. ### 4. Ask the agent When you are not sure how to do something, ask the agent in the chat. It already knows about Elements, so it can answer questions such as how to start the server. ### 5. Work from the terminal Elements is a folder and a command-line program, so you can also work from a terminal of your own: ```bash Terminal cd ~/elements/projects/myapp ls ``` Start an agent in the project folder, such as Claude Code, and it knows about Elements and the project: ```bash Terminal claude ``` Or open the folder in Vim or another editor. The Elements language server gives you the same editor features you get in VS Code. You don't need the terminal to use Elements. The videos use VS Code, which is a good environment for building these apps.

An Elements project is just a folder on your computer and by default it's going to go into the home directory, your Elements folder, projects, and then the name of the project. If you want to navigate into that folder yourself, you can do that on Windows or Mac just by clicking into the folder, and then you'll see the files that are there. If you're done for the day and you're starting up Visual Studio Code the next day, it will automatically start you in the previous project that you left off on. If for some reason you can't find that or you want to open up a different project, just close this window, go up to Code, File, Open Recent, and pick the most recent project or the project that you want to open.

And if you can't find it in the recent list, you can say Open Folder, navigate to the folder of your project, and then just open up that folder. Now when you open up the application in Visual Studio Code for the first time in the day, it's going to be in a failed state. It'll be turned off. The browser here will show some kind of error message. Just go down into the terminal area. And again, if that's not open, press Control-backtick, or go up to the menu here to Terminal, click New Terminal, and type elements start. Remember, elements start is how we start the day with Elements. That's going to boot up the application server very quickly, as you can see, and you should see your application appear here in the browser.

If you ever get confused and you're not sure what to do inside of Visual Studio Code, just go over to the chat window and you can ask your agent how to do anything. It will know about Elements already automatically, and so you could ask the agent how to do various things in Elements, how to start the server, et cetera, and it will tell you. Now, if you're a more advanced user, you're using the terminal or Vim, again, because Elements is just a folder and a command line program, you can access it through the terminal as well. So if I were to change into elements, projects, and then myapp, and look at the folders, you'll see in this folder is the application itself.

And if I were to start up Claude, for example, in this directory, Claude will know about Elements and it will know about the project here, and so I can just start telling Claude to work with Elements in this directory and it will work fine. I can also use Vim or an advanced editor and open it up, open up this project folder, and you'll get all of the Language Server Protocol features that you would normally get in an editor in Vim as well. Now, if you're not so advanced as to use the terminal, don't worry about that. All of our demos will be in Visual Studio Code because I think that's a perfect environment to work in these applications.