Browser & Mobile Compatibility¶
SciFlow targets modern browsers and ships as ES2022 ESM. This page documents supported environments and known limitations.
Supported Browsers¶
SciFlow requires a browser that supports ES2022 and Web Components (custom elements, Shadow DOM).
| Browser | Minimum version | Status |
|---|---|---|
| Chrome / Chromium | 94+ | Fully supported |
| Firefox | 93+ | Fully supported |
| Safari | 15+ | Fully supported |
| Edge | 94+ | Fully supported (Chromium-based) |
| IE 11 | — | Not supported |
Why ES2022?¶
The build targets es2022 to use modern syntax (top-level await, private class fields, Array.at()) without transpilation overhead. If you need to support older browsers, run the SciFlow bundle through your own transpiler (Babel, SWC) with appropriate polyfills.
Module Format¶
SciFlow ships as ESM only — no CommonJS or UMD fallback. Use it with:
- A
<script type="module">tag - A bundler that supports ESM (Vite, Webpack 5, Rollup, esbuild)
- Import maps for CDN-based setups
Mobile Browsers¶
The editor works in mobile browsers that meet the ES2022 requirement, but the editing experience has limitations inherent to contenteditable on mobile:
| Feature | Mobile status |
|---|---|
| Text editing | Works — uses the platform's on-screen keyboard |
| Bold / italic / formatting | Works via toolbar buttons |
| Drag-and-drop (citations, cross-refs) | Limited — most mobile browsers don't support drag events. Use the keyboard-accessible button alternatives. |
| Table editing | Works, but cell selection can be imprecise on small screens |
| Math input | Works — TeX is typed into a text field |
| Column resizing (tables) | Limited — pointer events may conflict with scroll gestures |
Mobile Recommendations¶
- Use the toolbar — Format bar buttons are the primary interaction method on mobile. Ensure
<sciflow-formatbar>is visible and within thumb reach. - Consider
editorWidth="narrow"— The narrow layout (52ch) works better on phone screens than the wide layout (82ch). - Test on real devices — Mobile Safari and Chrome for Android have different contenteditable behaviors. Test your specific feature set on both.
Touch Interactions¶
SciFlow inherits ProseMirror's touch support:
- Tap — Places cursor or selects node (citations, math, figures).
- Long press — Native text selection.
- Swipe — Standard scrolling (the editor doesn't intercept swipe gestures).
Drag-and-drop from <sciflow-reference-list> and <sciflow-outline> may not work on touch devices. Both components provide button-based alternatives for inserting citations and cross-references.
Content Security Policy (CSP)¶
If your application uses a strict CSP, note these requirements:
| Directive | Requirement | Reason |
|---|---|---|
script-src |
Your domain or the CDN hosting the bundle | Loading the editor script |
script-src |
cdn.jsdelivr.net (if using MathJax from CDN) |
MathJax equation rendering |
style-src |
'unsafe-inline' or a nonce |
Shadow DOM style injection uses constructed stylesheets and inline styles |
img-src |
Your image hosting domain | Figure src attributes |
connect-src |
Your WebSocket server (if using Yjs sync) | Real-time collaboration |
Constructed Stylesheets
Modern browsers support CSSStyleSheet construction, which SciFlow uses for Shadow DOM styling. This is CSP-compatible without 'unsafe-inline' in browsers that support the Constructable Stylesheets API (Chrome 73+, Firefox 101+, Safari 16.4+).
CORS Considerations¶
If the editor loads resources from a different origin (images, sync server), configure CORS headers on those servers:
Access-Control-Allow-Origin: https://your-app.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
For WebSocket connections (Yjs sync), the WebSocket server must accept connections from your application's origin.
Responsive Layout¶
The editor adapts to its container width. Use the editorWidth property to control the content column:
| Value | Column width | Best for |
|---|---|---|
"narrow" |
52ch | Mobile, sidebar layouts |
"wide" |
82ch | Full-screen desktop editing |
The format bar and selection editor are responsive by default and stack vertically on narrow screens.