Configuration
TeXlyre uses a centralized configuration system that generates runtime files from a single source of truth: texlyre.config.ts
.
Configuration Files
Source Configuration
texlyre.config.ts
- The primary configuration file defining all application settings, properties, and plugin registrations. This file serves as the single source of truth for your TeXlyre instance.
Generated Files
The following files are automatically generated from texlyre.config.ts
:
plugins.config.js
- Plugin registry used at runtimeuserdata.json
- Default user settings and propertiesuserdata.local.json
- Local development overrides (whenuserdata.local
is defined)
Running npm run start
or npm run generate-configs
will completely overwrite the following files:
plugins.config.js
userdata.json
userdata.local.json
Any manual changes to these files will be lost. Always edit texlyre.config.ts
instead.
Configuration Structure
Basic Metadata
const config: TexlyreConfig = {
title: 'TeXlyre',
tagline: 'A local-first LaTeX & Typst collaborative web editor',
url: 'https://texlyre.github.io',
baseUrl: '/texlyre/',
organizationName: 'texlyre',
projectName: 'texlyre',
favicon: '/src/assets/images/TeXlyre_notext.png',
// ...
};
Plugin Configuration
Register plugins by category. All plugin paths are relative to the extras
directory:
plugins: {
collaborative_viewers: ['bibtex'],
viewers: ['bibtex', 'image', 'pdf'],
renderers: ['pdf', 'svg', 'canvas'],
loggers: ['latex_visualizer', 'typst_visualizer'],
lsp: [],
backup: ['github'],
themes: ['texlyre_slim', 'texlyre_wide', 'texlyre_mobile'],
}
User Data Configuration
Define default settings and optional local overrides:
userdata: {
default: {
settings: {
editor: {
fontSize: 'base',
fontFamily: 'monospace',
// ...
},
// ...
},
properties: {
global: {
sidebarWidth: 502,
// ...
},
},
secrets: {},
},
local: {
settings: {
latex: {
texliveEndpoint: 'http://localhost:5004',
},
// ...
},
},
}
Generating Configuration Files
Development
Generate configuration files during development:
npm run generate-configs
This command:
- Reads
texlyre.config.ts
- Generates
plugins.config.js
- Generates
userdata.json
fromdefault
settings - Generates
userdata.local.json
by mergingdefault
withlocal
overrides - Updates
vite.config.ts
with the correctbaseUrl
- Updates
index.html
with title and favicon
Production Build
The start
script automatically runs configuration generation:
npm run start
This executes generate-configs
before building the application.
Exporting Custom User Data
You can create custom userdata.json
files from your TeXlyre instance:
Step 1: Configure Settings
Customize your settings and properties within the TeXlyre application to match your preferred configuration.
Step 2: Export Account Data
- Click your profile icon in the top-right corner
- Select Export Account from the dropdown menu
Step 3: Include Settings
In the export dialog, ensure "Include settings, properties, and encrypted secrets" is checked.
Step 4: Extract Configuration
The downloaded ZIP file contains userdata.json
in the root directory. Extract this file to use as your custom configuration.
The exported userdata.json
includes encrypted secrets. You must manually set the secrets
field to an empty object:
{
"settings": { /* ... */ },
"properties": { /* ... */ },
"secrets": {}
}
Placing a custom userdata.json
in your repository will be overwritten when running:
npm run start
npm run generate-configs
To preserve custom configurations, update texlyre.config.ts
instead.
Forking and Deployment
GitHub Pages Deployment
When forking TeXlyre for GitHub Pages deployment, the configuration generation process runs automatically.
Step 1: Fork Repository
Fork the TeXlyre repository to your GitHub account.
Step 2: Enable GitHub Pages
Navigate to repository Settings → Pages and configure the deployment source.
Step 3: Configure texlyre.config.ts
Update texlyre.config.ts
with your deployment details:
const config: TexlyreConfig = {
title: 'My TeXlyre Instance',
url: 'https://yourusername.github.io',
baseUrl: '/your-repo-name/',
organizationName: 'yourusername',
projectName: 'your-repo-name',
// ...
};
Step 4: Automatic Build Process
The GitHub Actions workflow automatically:
- Runs
npm run generate-configs
- Overwrites
plugins.config.js
,userdata.json
, anduserdata.local.json
- Builds the application
- Deploys to GitHub Pages
The deployment process always regenerates configuration files from texlyre.config.ts
. Manual edits to generated files will not persist through deployments.
Custom Domain Configuration
For custom domains, update the url
field in texlyre.config.ts
:
const config: TexlyreConfig = {
url: 'https://your-custom-domain.com',
baseUrl: '/',
// ...
};
Configuration Workflow
Recommended Workflow
- Edit
texlyre.config.ts
with desired changes - Run
npm run generate-configs
to update generated files - Test changes locally with
npm run dev
- Commit both
texlyre.config.ts
and generated files - Deploy using
npm run start
or GitHub Actions
Local Development Overrides
Use the local
configuration block for development-specific settings:
userdata: {
default: {
settings: {
latex: {
texliveEndpoint: 'https://texlive.emaily.re',
},
},
},
local: {
settings: {
latex: {
texliveEndpoint: 'http://localhost:5004',
},
},
},
}
This generates:
userdata.json
with production endpointsuserdata.local.json
with local development endpoints
Troubleshooting
Configuration Not Applied
If configuration changes don't appear:
- Verify
texlyre.config.ts
syntax is valid - Run
npm run generate-configs
manually - Clear browser cache and reload
- Check browser console for configuration errors
Plugin Not Loading
Ensure plugins are:
- Registered in
texlyre.config.ts
under the correct category - Located in the
extras
directory with correct paths - Properly exported and implementing required interfaces
Build Failures
If builds fail after configuration changes:
- Validate TypeScript types in
texlyre.config.ts
- Ensure all referenced plugins exist
- Check that
baseUrl
and other paths are valid - Review GitHub Actions logs for specific errors