Flutter

npm create vite@latest web-editor -- --template react
cd web-editor
npm install polotno
npm install -D vite-plugin-singlefile

// web-editor/src/nativeBridge.js
const post = (message) => window.PolotnoFlutter?.postMessage(JSON.stringify(message));

const base64Of = (dataUrl) => dataUrl.split(',')[1];

// The app waits for a reply to every request, so failures are reported too.
const replying = (task) => async (...args) => {
  try {
    await task(...args);
  } catch (error) {
    post({ type: 'error', message: String(error?.message || error) });
  }
};

export const connectNativeBridge = (store) => {
  window.polotnoNative = {
    load: (json) => store.loadJSON(json),

    save: replying(async () => {
      const preview = await store.toDataURL({ pixelRatio: 0.5 });
      post({
        type: 'save',
        docJson: JSON.stringify(store.toJSON()),
        previewBase64: base64Of(preview),
      });
    }),

    export: replying(async (format) => {
      const dataUrl =
        format === 'pdf'
          ? await store.toPDFDataURL()
          : await store.toDataURL({ pageId: store.activePage?.id });
      post({ type: 'export', format, base64: base64Of(dataUrl) });
    }),
  };

  // Ask Dart for the design now that `load` exists.
  post({ type: 'ready' });
};

// web-editor/src/App.jsx
import { createStore } from 'polotno/model/store';
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Workspace } from 'polotno/canvas/workspace';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { PagesTimeline } from 'polotno/pages-timeline';
import { SidePanel } from 'polotno/side-panel';
import { connectNativeBridge } from './nativeBridge';

const store = createStore({ key: import.meta.env.VITE_POLOTNO_KEY, showCredit: true });

const inApp = !!window.PolotnoFlutter;
if (inApp) {
  connectNativeBridge(store);
} else {
  // Plain browser (npm run dev): start with an empty page.
  store.addPage();
}

export default function App() {
  return (
    <PolotnoContainer style={{ width: '100%', height: '100%' }}>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        {/* A browser download does nothing in a WebView. */}
        <Toolbar store={store} downloadButtonEnabled={!inApp} />
        <Workspace store={store} />
        <ZoomButtons store={store} />
        <PagesTimeline store={store} />
      </WorkspaceWrap>
    </PolotnoContainer>
  );
}

flutter:
  assets:
    - assets/editor/index.html

flutter pub add webview_flutter webview_flutter_android image_picker path_provider share_plus

// lib/editor_screen.dart
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

/// The page's origin. Add it to your API key's allowed domains.
const editorOrigin = 'http://localhost/';

class EditorScreen extends StatefulWidget {
  const EditorScreen({super.key, required this.design});
  final String design;

  @override
  State<EditorScreen> createState() => _EditorScreenState();
}

class _EditorScreenState extends State<EditorScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // The channel name becomes `window.PolotnoFlutter` in the page.
      ..addJavaScriptChannel('PolotnoFlutter', onMessageReceived: _onMessage);
    _loadEditor();
  }

  Future<void> _loadEditor() async {
    final html = await rootBundle.loadString('assets/editor/index.html');
    await _controller.loadHtmlString(html, baseUrl: editorOrigin);
  }

  Future<void> _onMessage(JavaScriptMessage message) async {
    final data = jsonDecode(message.message) as Map<String, dynamic>;
    switch (data['type']) {
      case 'ready':
        // A JSON document is a valid JavaScript object literal.
        await _controller.runJavaScript('window.polotnoNative.load(${widget.design})');
      case 'save':
        // data['docJson']: the design. data['previewBase64']: a PNG preview.
        break;
      case 'export':
        // data['base64']: the PNG or PDF, ready for base64Decode().
        break;
      case 'error':
        debugPrint(data['message'] as String);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          TextButton(
            onPressed: () => _controller.runJavaScript("window.polotnoNative.export('png')"),
            child: const Text('PNG'),
          ),
          TextButton(
            onPressed: () => _controller.runJavaScript("window.polotnoNative.export('pdf')"),
            child: const Text('PDF'),
          ),
          TextButton(
            onPressed: () => _controller.runJavaScript('window.polotnoNative.save()'),
            child: const Text('Save'),
          ),
        ],
      ),
      body: WebViewWidget(controller: _controller),
    );
  }
}

import 'package:image_picker/image_picker.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

// In initState, after creating the controller:
final platform = _controller.platform;
if (platform is AndroidWebViewController) {
  platform.setOnShowFileSelector(_pickFiles);
}

/// Returns the picked images as file URIs, or an empty list when the user cancels.
Future<List<String>> _pickFiles(FileSelectorParams params) async {
  final picker = ImagePicker();
  final files = params.mode == FileSelectorMode.openMultiple
      ? await picker.pickMultiImage()
      : [?await picker.pickImage(source: ImageSource.gallery)];
  return files.map((file) => Uri.file(file.path).toString()).toList();
}