When creating or modifying HTML document templates for SchemeServe, it is often much easier to develop the document in Visual Studio Code (VS Code) rather than directly within the SchemeServe Document Builder.
Visual Studio Code provides:
- Syntax highlighting for HTML and CSS.
- Automatic code formatting.
- Error detection and suggestions.
- Instant document preview.
- Easier navigation through large templates.
- Faster development and testing.
Whilst the browser preview may not be a perfect representation of the final SchemeServe output, it is an excellent way to get the majority of the document layout and styling completed before testing within SchemeServe.
Step 1: Install Visual Studio Code
If you do not already have Visual Studio Code installed:
Visit:
- Download the latest version for your operating system.
- Run the installer.
- Accept the default installation options.
- Launch Visual Studio Code.
Once installed, you are ready to install the Live Server extension.
Step 2: Install the Live Server Extension
Live Server allows you to preview HTML documents in a web browser and automatically refreshes whenever changes are saved.
Installing the Extension
- Open Visual Studio Code.
Click the Extensions icon on the left-hand toolbar.
Alternatively press:
Ctrl + Shift + X
Search for:
Live Server
Locate:
Live Server by Ritwick Dey
- Click Install.
- Wait for installation to complete.
- Restart VS Code if prompted.
You only need to install this extension once.
Step 3: Create a Project Folder
Before creating any files, create a dedicated folder for your document development.
Example:
C:\SchemeServe\DocumentTemplatesor
Documents\SchemeServe\TemplatesThis folder can contain all of your HTML templates and related files.
Example structure:
DocumentTemplates
│
├── quotation.html
├── certificate.html
├── statement.html
├── email-template.htmlStep 4: Open the Folder in VS Code
- Open Visual Studio Code.
Select:
File → Open Folder
- Browse to your project folder.
- Click Select Folder.
The folder should now appear in the Explorer panel on the left-hand side.
Common Error
If you see the following message:
Open a folder or workspace...
(File -> Open Folder)This means VS Code does not currently have a folder open.
To fix this:
- Select File → Open Folder
- Choose your project folder
- Re-open your HTML file
Step 5: Create or Import Your HTML Template
You can either create a new document or import an existing SchemeServe template.
Creating a New File
- Right-click inside the Explorer panel.
- Select New File.
- Enter a filename such as:
template.htmlImporting Existing HTML
- Copy the HTML from an existing SchemeServe document.
- Paste it into a new HTML file.
- Save the file.
Step 6: Save the File
Ensure the file has a .html extension.
Examples:
quotation.html
certificate.html
statement.html
email-template.htmlSave the file using:
Ctrl + SStep 7: Launch Live Server
Open your HTML file.
There are two ways to launch Live Server.
Method 1 – Right Click
- Right-click anywhere within the HTML file.
- Select:
Open with Live ServerMethod 2 – Go Live Button
Look in the bottom-right corner of VS Code.
Click:
Go LiveStep 8: Verify the Preview Opens
Your default web browser should open automatically.
The URL will look similar to:
http://127.0.0.1:5500/template.htmlor
http://localhost:5500/template.htmlYou should now see your document rendered in the browser.
Step 9: Test That Live Server Is Working
Replace the contents of your HTML file with:
<!DOCTYPE html>
<html>
<head>
<title>Test Document</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Save the file.
The browser should display:
HelloIf you can see this, Live Server is working correctly.
Step 10: Test Automatic Refresh
Change:
<h1>Hello</h1>to:
<h1>My SchemeServe Test Document</h1>Press:
Ctrl + SThe browser should automatically refresh and display the new text.
No manual browser refresh should be required.
CSS Styling
SchemeServe document templates generally require the CSS to be embedded directly within the document template itself at the very top.
For example
<div>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
h1 {
color: #004b87;
}
.table-header {
background-color: #eeeeee;
font-weight: bold;
}
</style>
<!-- Document HTML Here -->
</div>Using VS Code for SchemeServe Documents
Once Live Server is working, you can begin building your SchemeServe templates directly within VS Code.
Typical examples include:
- Quotations
- Certificates
- Statements
- Policy Schedules
- Renewal Documents
- Email Templates
- Agent Statements
- Claims Documentation
Why Use VS Code Instead of the SchemeServe Document Builder?
Whilst VS Code does not perfectly replicate how SchemeServe ultimately renders documents, it is extremely useful for developing templates.
Benefits include:
- Faster development.
- Easier styling adjustments.
- Improved HTML readability.
- Better table design.
- Easier troubleshooting.
- Instant preview of changes.
In most cases, you can get approximately 90–95% of the document layout and styling correct before importing the HTML into SchemeServe.
This is often significantly quicker than performing all development directly within the SchemeServe Document Builder.
Recommended Workflow
- Create or import the HTML template into VS Code.
- Preview the document using Live Server.
- Build and style the document.
- Test tables, spacing and formatting.
- Copy the HTML into SchemeServe.
- Generate a test document.
- Review the output.
- Make any final adjustments if required.
Troubleshooting
"Open with Live Server" Missing
Possible causes:
- Live Server is not installed.
- VS Code requires restarting.
- No folder is open.
- The file has not been saved as .html.
Resolution
- Confirm Live Server is installed.
- Restart VS Code.
- Open a project folder.
- Re-open the HTML file.
Browser Does Not Open
Try:
- Close VS Code.
- Re-open the project folder.
- Click Go Live again.
CSS Not Applying
Check that your HTML contains:
<link rel="stylesheet" href="styles.css">Also ensure:
- The file name is correct.
- The CSS file exists.
- Both files have been saved.
Page Does Not Refresh Automatically
Check:
- Live Server is still running.
- You are viewing the Live Server URL.
- The file has been saved.
HTML Appears Broken
Common causes include:
- Missing closing tags.
- Incorrect table structure.
- Missing quotation marks.
- Invalid HTML nesting.
VS Code will often highlight these issues automatically.
Recommended Additional Extensions
| Extension | Purpose |
|---|---|
| Live Server | Browser preview and auto refresh |
| Prettier | Automatic code formatting |
| HTML CSS Support | Improved HTML and CSS suggestions |
| Auto Rename Tag | Automatically updates matching HTML tags |
| IntelliSense for CSS Class Names | CSS autocomplete |
Summary
Visual Studio Code is an excellent tool for developing SchemeServe document templates.
By combining VS Code with Live Server you can:
- Build templates faster.
- Preview changes instantly.
- Reduce development time.
- Improve document quality.
Whilst final testing should always be performed within SchemeServe, developing the majority of the template in VS Code can significantly improve efficiency and make document creation much easier.
.png)
