AnnexCode – Getting Started (Tutorial)

A hands-on walkthrough ("your first hour with AnnexCode"). Whitepaper format, PDF-ready. Screenshots are captured according to the shot list at the end.

Goal of this Tutorial

By the end you will have built a small landing page: an HTML file with a Bootstrap navbar and hero section, adjusted through the inspector, checked in the WYSIWYG preview for Desktop and Mobile, tested with a local server, saved as an .axcode project, and uploaded to a (demo) server via FTP.

Step 1: Create a New HTML File

Launch AnnexCode and create a new empty HTML file via File ▸ New (⌘N). It appears as a tab in the editor with syntax highlighting. Write a minimal HTML skeleton (<!DOCTYPE html>, html, head, body).

Step 2: Insert Components via Drag & Drop

Open the components panel in the sidebar. Drag a Navbar and a Hero section into the preview – the ten ready-made Bootstrap components can be placed directly. The source code in the editor is updated automatically.

Step 3: Adjust Properties in the Inspector

Select the hero component and adjust text, image, and color in the inspector. Changes are written straight into the HTML – you see them immediately in the preview and in the source.

Step 4: Check the Preview and Viewports

Switch the WYSIWYG preview between the Desktop (1200), Tablet (768), and Mobile (375) viewports. Enable edit mode and change a heading directly in the preview – the text is written back into the HTML source.

Step 5: Edit CSS and Use Find & Replace

Open the project's CSS file in a second tab and adjust a color. Use the editor's search bar to find a color value and replace all matches at once.

Step 6: Start a Local Server

Start the matching local development server for your project (e.g. PHP or Python http.server). The port is assigned automatically from the range 8100–8199. The preview can now show the server URL – letting you check server-side output instead of static rendering.

Step 7: Create an FTP Connection

Open the connection manager and create an FTP connection with host, username, and password. The password is stored in the macOS Keychain, not in the project. The FTP perspective then shows the sync status of every project file compared to the server.

Step 8: Upload and Save

Upload the active file to the server with the toolbar button – the progress indicator shows the status. Then save your project via File ▸ Save… (⌘S) as an .axcode container. On save, the project is also written to the shared version index, making it findable through AnnexHub's central search.

Result & Next Steps

You built a landing page from ready-made components, tested it locally, and published it – without leaving the app. Next, take a look at the AI chat panel (explain code, refactor, generate tests), the Google codes for Analytics & co., and the integrated terminal (View ▸ Toggle Terminal, ⌃⌘T).

All details are in the manual (docs/manuals/en/AnnexCode.md).

Shot List (for Screenshot Capture)