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

Module format is decided per package, not across the release:

Package	ESM	CommonJS
@sciflow/schema-core	Yes	Yes — its exports map carries a require condition alongside import
@sciflow/schema-prosemirror	Yes	No
@sciflow/editor-core	Yes	No
@sciflow/editor-start (and /bundle)	Yes	No
@sciflow/pandoc-ast	Yes	No
@sciflow/pandoc-web	Yes	No

Everything except @sciflow/schema-core is 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

<script type="module" src="sciflow-editor.js"></script>

@sciflow/schema-core from CommonJS

@sciflow/schema-core is a genuine dual package, so a CommonJS build tool, a Jest suite that has not moved to ESM, or a plain node -e one-liner can reach it:

// ESM
import { texToHeadingText } from '@sciflow/schema-core';

// CommonJS
const { texToHeadingText } = require('@sciflow/schema-core');

It has no runtime dependencies and no ProseMirror dependency, which is why it is the one package that can carry a require condition without dragging an ESM-only graph behind it.

texToHeadingText is a reduction, not a TeX-to-Unicode conversion

It unwraps appearance-only wrappers and turns TeX spacing commands into spaces, and it leaves every other command verbatim — \alpha stays \alpha, \frac{a}{b} stays \frac{a}{b}. \mathbf{V}_{\mathbf{set}} becomes V_set. That is deliberate: a half-correct symbol table would silently render the wrong symbol in a title, which is worse than a visibly unrendered backslash command.

It can also return an empty string — nothing survives the reduction for some inputs, and it invents no text. Every caller must decide what an empty result means on its own surface (drop the entry, fall back to a containing part's title, or supply its own placeholder). It never throws and never returns undefined.

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

1. Use the toolbar — Format bar buttons are the primary interaction method on mobile. Ensure <sciflow-formatbar> is visible and within thumb reach.
2. Consider editorWidth="narrow" — The narrow layout (52ch) works better on phone screens than the wide layout (82ch).
3. 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'	Editor content styles are injected into document.head as an inline <style data-sf-content-styles> element; shadow-root chrome overrides via setShadowStyles() also use inline <style>
img-src	Your image hosting domain	Figure src attributes
connect-src	Your WebSocket server (if using Yjs sync)	Real-time collaboration

Inline style injection

Editor content styles (<style data-sf-content-styles>) are injected once into document.head as an inline <style> element. Shadow-root chrome overrides via setShadowStyles() also create inline <style> elements inside the shadow root. Both require 'unsafe-inline' in style-src: neither element carries a nonce, and this release exposes no API to put one on them, so a nonce-only style-src leaves the editor unstyled.

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.