🖥 seCMS GUI Manual

📥 Installation

🐧 Linux (AppImage)

1. Download the secms-GUI.AppImage file.
2. Make it executable:

   chmod +x secms-GUI.AppImage

3. Double-click the file to launch, or run from terminal:

   ./secms-GUI.AppImage

💡 Tip: On some Linux systems (especially with Korean, Japanese, or Chinese input methods), you may need to launch with environment variables for proper IME support. A launcher script run-appimage.sh is provided that sets these automatically.

🍎 macOS

1. Download the .zip file for macOS.
2. Extract it and drag secms GUI.app to your Applications folder.
3. Double-click to launch.

🇪🇸 Windows

1. Download the .exe installer for Windows.
2. Run the installer and follow the on-screen prompts.
3. Launch from the Start Menu or desktop shortcut.

💻 Running from Source (for developers)

If you have Go and Node.js installed:

# Run as a desktop app
./run.sh

# Or run the web interface only (opens in your browser)
task dev

---

🌟 First Launch

When you first open seCMS GUI, you'll see the landing page:

• A dropdown to select an existing site (if any)
• A "+ New Site" button to create your first site
• Theme sample cards showing available designs

If this is your first time, click "+ New Site" to get started.

---

🖼️ The Interface

The editor uses a three-pane layout:

🖐 Top Menu Bar

• Site dropdown — Switch between your sites
• Status badge — Shows if site is new, has unsaved changes, etc.
• Theme dropdown — Change your site's visual design
• + New Site — Create a new website
• 💾 Apply — Save your changes
• ↩️ Revert — Undo all unsaved changes
• 👁 Preview — Build and preview your site
• 🚀 Generate — Publish the final version of your site

📂 Left Pane

• Pages — Lists all pages in your site. Click a page to edit it.
• Images — Shows uploaded images. Click to copy the image path.
• Files — Shows files in your site directory.

👁 Middle Pane (Preview)

Shows a live preview of your website. After making edits, click Preview to see the updated version.

✏️ Right Pane (Editor)

This is where you edit your content. It shows:

• Page-level settings (title, path)
• A list of content sections, each with its own title, content, styling, and options

You can resize the panes by dragging the dividers between them.

---

✨ Creating a New Site

1. Click "+ New Site" in the top menu.
2. Choose one of two options:
   • Option A — Start from a theme sample: Scroll through the theme cards on the landing page and click one. This creates a new site pre-filled with sample content that matches the theme.
   • Option B — Start blank: Enter a site name and select a theme from the dropdown. This creates a minimal site with a single home page.
3. Your new site opens in the editor. You'll see a home page ready for editing.

---

📄 Editing Pages

Selecting a Page

Click any page name in the Pages list (left pane) to load it in the editor.

Page Settings

At the top of the right pane, you'll see the page-level fields:

Field	What it does
Title	The page heading shown on the site
Path	The URL path (e.g., /about or /services/design)
Description	Used by search engines (SEO meta description)
Banner	Path to a banner image for the page

➕ Adding a New Page

1. Click the "+" button at the top of the Pages list.
2. A new page appears in the list with a default name.
3. The name is immediately editable — type your page name and press Enter.
4. The page is created with an empty content section ready for editing.

✏️ Renaming a Page

1. Click the pencil icon next to the page name in the list.
2. Type the new name and press Enter.

🗑️ Deleting a Page

1. Click the trash icon next to the page name.
2. Confirm the deletion in the dialog that appears.

⚠️ Note: Deleting a page removes it permanently. Make sure you've saved any content you want to keep.

---

🧱 Working with Sections

Pages are made up of sections — blocks of content that appear one after another on the page. Each section can have its own title, content, styling, and special features.

Section Fields

Field	What it does
Title	Section heading displayed on the page
Widget	Special interactive component (e.g., contact-form)
Content	The main text/HTML content of the section
Style	CSS styling for the section container
Content Style	CSS styling for the inner content
Align	Text alignment: Default, Left, Center, or Right
Border	CSS border (e.g., 2px solid #1565C0)
Image	Path to a decorative image
Animation	Animated effects for the section

✍️ Writing Content

The Content field accepts HTML. You can use:

• <p> for paragraphs
• <strong> for bold text
• <em> for italic text
• <a href="..."> for links
• <img src="..."> for images
• <ul> and <ol> for lists
• Any other standard HTML

Example:

<p>Welcome to our website! We specialize in <strong>web design</strong>
and <em>digital marketing</em>.</p>

<p>Contact us at <a href="mailto:hello@example.com">hello@example.com</a>.</p>

➕ Adding a Section

Click the "+ Add Section" button at the bottom of the section list. A new empty section is added at the end of the page.

↕️ Reordering Sections

Use the up/down arrow buttons on each section card to move it higher or lower on the page.

🗑️ Deleting a Section

Click the trash icon on the section card header. Confirm the deletion.

✨ Using Animations

Some themes support animated effects on sections. In the Animation area:

1. Select an Effect from the dropdown (e.g., sun, moon, flying-around, rain, snow)
2. Set an Image path for the animated element
3. Adjust Speed (1 = slow, 10 = fast, default is 5)
4. Choose Direction (left or right)

---

🌄 Adding Images

📤 Uploading Images

1. In the left pane, find the Images section.
2. Click the "+" upload button.
3. Select one or more images from your computer (supports JPG, PNG, GIF, WebP, SVG).
4. The images are uploaded to your site and appear in the gallery.

🎨 Using Images in Content

Method 1 — Insert from gallery: While editing a section's Content field, place your cursor where you want the image. Then click the "Insert Image" button above the content area. Select an image from the gallery to insert it.

Method 2 — Manual HTML: Type an image tag directly in the content field:

<img src="/images/photo.jpg" alt="Description of the image">

Image Positioning

Class	Effect
float-left	Image floats to the left, text wraps around it
float-right	Image floats to the right, text wraps around it
center	Image is centered on the page
full-width	Image stretches to fill the full width

---

☰ Navigation Menu

The navigation menu appears at the top of your website (in most themes) and lets visitors navigate between pages.

• Menu items have a Label (what visitors see) and a Path (which page it links to).
• You can add external links that point to other websites.
• Menu items can have children (dropdown sub-menus).

To add a link to an external website (e.g., your blog or social media), set the URL instead of a path and mark it as External so it opens in a new browser tab.

---

🎨 Changing Themes

Themes control the visual design of your website — colors, fonts, layout, and style.

1. Click the Theme dropdown in the top menu bar.
2. Select a different theme from the list.
3. The preview updates automatically to show the new look.

Available Themes

Theme	Best for
starter	Simple starting point, easy to customize
blueprint	Clean, professional business sites
bizcraft	Corporate and business websites
boutique	Creative portfolios and shops
cineplex	Entertainment and media sites
docpress	Documentation and knowledge bases
flavor	Restaurants and food businesses
photofocus	Photography portfolios
runable	Modern app and startup sites
techcatalog	Technology product showcases

💡 Tip: Changing the theme does not affect your content — only the visual design changes. You can switch themes at any time.

---

👁 Preview and Publish

👁 Preview

Preview builds your site from your current edits (even unsaved ones) and shows the result in the middle pane.

1. Make your edits in the right pane.
2. Click the Preview button (or press Ctrl+P).
3. The preview pane refreshes with your latest changes.

The preview is a fully functional version of your site. You can scroll through it, click links, and see exactly how it will look to visitors.

🚀 Publish (Generate)

Generate creates the final version of your site from your saved content.

1. Make sure you've clicked Apply (Save) to save your latest changes.
2. Click the Generate button (or press Ctrl+Shift+P).
3. The published site opens in a new browser tab.

The generated files are placed in your site's dist/ directory. These are the files you'd upload to your web hosting provider.

⚠️ Important: Preview uses your unsaved edits. Generate uses your saved content. Always Apply before Generate to include your latest changes.

---

💾 Save and Revert

How Saving Works

seCMS GUI uses a workspace system to protect your published site:

1. When you start editing, a working copy of your site is created.
2. All your edits happen in this working copy.
3. When you click Apply, the working copy is saved back to your site.
4. Until you Apply, your original site remains unchanged.

💚 Apply (Save)

Click the Apply button to save all your changes. The button pulses green when you have unsaved changes.

↩️ Revert

Click the Revert button to discard all unsaved changes and go back to the last saved version. A confirmation dialog will appear.

⚠️ Note: Revert cannot be undone. Make sure you want to discard your changes before confirming.

---

⚙️ Settings

Click the gear icon in the top-right corner of the menu bar to open Settings.

Setting	What it does
Sites Directory	Where your website files are stored
Themes Directory	Where themes are located
secms Binary	Path to the secms build tool
Workspace Directory	Where temporary editing copies are kept
Port	The local server port (default: 9090)

Most users won't need to change these settings. They're pre-configured when you install the app.

---

⌨ Keyboard Shortcuts

Shortcut	Action
Ctrl+S	Save (Apply changes)
Ctrl+P	Preview
Ctrl+Shift+P	Generate (Publish)
Escape	Close dialogs

---

💡 Tips and Best Practices

✍️ Content Writing

• Keep paragraphs short. Web visitors scan content quickly. Use short paragraphs and clear headings.
• Use sections to organize. Each topic or area of your page should be its own section. This makes it easy to rearrange content later.
• Add images. Visual content makes your site more engaging. Upload images and add them to your sections.

📂 Site Organization

• Name pages clearly. Use descriptive page names that match your navigation (e.g., "About Us", "Services", "Contact").
• Set good paths. URL paths should be short and descriptive (e.g., /about, /services, /contact).
• Write descriptions. Page descriptions help search engines understand your content.

⚡ Working Efficiently

• Preview often. Click Preview after making changes to see how they look in the actual design.
• Save regularly. Click Apply to save your work. The status indicator shows when you have unsaved changes.
• Try different themes. Switching themes is instant and doesn't affect your content. Experiment to find the best look.

---

🔧 Troubleshooting

"Page not yet built"

This message appears in the preview when the page hasn't been built yet. Click the Preview button to build and display your content.

Preview doesn't update

If the preview seems stuck, try:

1. Click Preview again.
2. Check for error messages in the top bar (red banner).
3. If there's a build error, check your content for invalid HTML.

Images not showing

• Make sure the image path starts with /images/ (e.g., /images/photo.jpg).
• Verify the image was uploaded using the image gallery.
• Click Preview to rebuild the site with the new images.

Theme doesn't look right

• Add a banner image to your page.
• Make sure you have content in your sections.
• Some themes include sample sites — try creating a new site from the theme sample to see the intended layout.

Changes not appearing after Generate

Make sure you clicked Apply (Save) before Generate. Generate uses saved content, not your current edits.

Application won't start

• Linux: Make sure the AppImage is executable (chmod +x secms-GUI.AppImage).
• macOS: You may need to allow the app in System Preferences > Security & Privacy.
• Windows: Try running as administrator if the installer doesn't complete.