diff --git a/nextgisweb/raster_layer/amd/ngw-raster-layer/ExportForm.js b/nextgisweb/raster_layer/amd/ngw-raster-layer/ExportForm.js
deleted file mode 100644
index 87ffb13302..0000000000
--- a/nextgisweb/raster_layer/amd/ngw-raster-layer/ExportForm.js
+++ /dev/null
@@ -1,119 +0,0 @@
-define([
-    "dojo/_base/declare",
-    "dojo/_base/array",
-    "dojo/_base/lang",
-    "ngw-pyramid/modelWidget/Widget",
-    "dijit/_TemplatedMixin",
-    "dijit/_WidgetsInTemplateMixin",
-    "dojo/store/Memory",
-    "dojo/data/ObjectStore",
-    "dojo/request/xhr",
-    "dojo/io-query",
-    "@nextgisweb/pyramid/settings!",
-    "ngw/route",
-    "@nextgisweb/pyramid/i18n!",
-    "dojo/text!./template/ExportForm.hbs",
-    // template
-    "dijit/layout/ContentPane",
-    "dijit/layout/BorderContainer",
-    "dojox/layout/TableContainer",
-    "dijit/form/Select",
-    "dijit/form/CheckBox",
-    "dijit/form/Button",
-    "dijit/form/TextBox",
-    "dijit/form/MultiSelect"
-], function (
-    declare,
-    array,
-    lang,
-    Widget,
-    _TemplatedMixin,
-    _WidgetsInTemplateMixin,
-    Memory,
-    ObjectStore,
-    xhr,
-    ioQuery,
-    settings,
-    route,
-    i18n,
-    template
-) {
-    var SRS_URL = route.spatial_ref_sys.collection();
-
-    return declare([Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
-        templateString: i18n.renderTemplate(template),
-
-        constructor: function (params) {
-            declare.safeMixin(this, params);
-        },
-
-        postCreate: function () {
-            this.inherited(arguments);
-            this.wFormat.watch('value', lang.hitch(this, function (attr, oldVal, newVal) {
-                var format = this.formatStore.get(newVal);
-            }));
-            this.buttonSave.on('click', lang.hitch(this, function () {
-                var query = {
-                    format: this.wFormat.get('value'),
-                    srs: this.wSRS.get('value'),
-                    bands: this.wBands.get('value')
-                };
-                window.open(route.resource.export({
-                    id: this.resid
-                }) + '?' + ioQuery.objectToQuery(query));
-            }));
-        },
-
-        startup: function () {
-            this.inherited(arguments);
-
-            this.formatStore = new ObjectStore(new Memory({
-                data: array.map(settings.export_formats, function (format) {
-                    return {
-                        id: format.name,
-                        label: format.display_name
-                    }
-                })
-            }));
-            this.wFormat.set('store', this.formatStore);
-
-            xhr.get(SRS_URL, {
-                handleAs: 'json'
-            }).then(lang.hitch(this, function (data) {
-                this.wSRS.set('store', new ObjectStore(new Memory({
-                    data: array.map(data, function (item) {
-                        return {
-                            id: item.id,
-                            label: item.display_name
-                        }
-                    })
-                })));
-            })).then(
-                lang.hitch(this, function() {
-                    xhr.get(route.resource.item({id: this.resid}), {
-                        handleAs: 'json'
-                    }).then(
-                        function(data) {
-                            this.wSRS.set('value', data.raster_layer.srs.id);
-                        }.bind(this)
-                    );
-                })
-            );
-
-            // Multiselect Dojo widget is not associated with a data store/object.
-            // As per the documentation it is just a wrapper over the SELECT HTML element.
-            // As a result we need to use the basic HTML/JS code to add the OPTIONS for the widget.
-            xhr.get(route.resource.item({id: this.resid}), {
-                handleAs: 'json'
-            }).then(lang.hitch(this, function (data) {
-                array.forEach(data.raster_layer.color_interpretation, lang.hitch(this, function (item, idx) {
-                    var opt = document.createElement("option");
-                    opt.text = i18n.gettext("Band") + " " + (idx + 1) + (item !== "Undefined" ? " (" + item + ")" : "");
-                    opt.value = idx + 1;
-                    opt.selected = true;
-                    this.wBands.domNode.options.add(opt)
-                }));
-            }));
-        }
-    });
-});
diff --git a/nextgisweb/raster_layer/amd/ngw-raster-layer/template/ExportForm.hbs b/nextgisweb/raster_layer/amd/ngw-raster-layer/template/ExportForm.hbs
deleted file mode 100644
index 7daa7202c0..0000000000
--- a/nextgisweb/raster_layer/amd/ngw-raster-layer/template/ExportForm.hbs
+++ /dev/null
@@ -1,33 +0,0 @@
-<div data-dojo-type="${baseClass}"
-    data-dojo-attach-point="focusNode">
-    <div data-dojo-type="dijit/layout/BorderContainer"
-        data-dojo-props="gutters: false"
-        style="width: 100%; height: 400px">
-        <div data-dojo-type="dijit/layout/ContentPane"
-            data-dojo-props="region: 'center'"
-            style="padding: 1em 0;">
-            <div data-dojo-type="dojox/layout/TableContainer" data-dojo-props="cols:1, labelWidth: 200">
-                <select data-dojo-type="dijit/form/Select"
-                    data-dojo-attach-point="wFormat"
-                    data-dojo-props="sortByLabel: false"
-                    title="{{gettext 'Format'}}" style="width: 100%">
-                </select>
-                <select data-dojo-type="dijit/form/Select"
-                    data-dojo-attach-point="wSRS"
-                    title="{{gettext 'SRS'}}" style="width: 100%">
-                </select>
-                <select data-dojo-type="dijit/form/MultiSelect"
-                    data-dojo-attach-point="wBands"
-                    title="{{gettext 'Bands'}}" style="width: 100%">
-                </select>
-            </div>
-        </div>
-        <div data-dojo-type="dijit/layout/ContentPane"
-            data-dojo-props="region: 'bottom'"
-            style="padding: 1em 0;">
-            <button data-dojo-type="dijit/form/Button"
-                data-dojo-attach-point="buttonSave"
-                class="dijitButton--primary">{{gettext 'Save'}}</button>
-        </div>
-    </div>
-</div>
diff --git a/nextgisweb/raster_layer/api.py b/nextgisweb/raster_layer/api.py
index 223a654861..f6398cf9b4 100644
--- a/nextgisweb/raster_layer/api.py
+++ b/nextgisweb/raster_layer/api.py
@@ -42,7 +42,7 @@ def export(request):
     srs = int(request.GET.get("srs", request.context.srs.id))
     srs = SRS.filter_by(id=srs).one()
     format = request.GET.get("format", "GTiff")
-    bands = request.GET.getall("bands")
+    bands = request.GET.get("bands").split(",")
 
     if format is None:
         raise ValidationError(_("Output format is not provided."))
diff --git a/nextgisweb/raster_layer/nodepkg/export-form/ExportForm.js b/nextgisweb/raster_layer/nodepkg/export-form/ExportForm.js
new file mode 100644
index 0000000000..d5f6e179fc
--- /dev/null
+++ b/nextgisweb/raster_layer/nodepkg/export-form/ExportForm.js
@@ -0,0 +1,114 @@
+import settings from "@nextgisweb/pyramid/settings!raster_layer";
+import { route, routeURL } from "@nextgisweb/pyramid/api";
+import { Form } from "@nextgisweb/gui/antd";
+import { FieldsForm, Select, useForm } from "@nextgisweb/gui/fields-form";
+import { LoadingWrapper, SaveButton } from "@nextgisweb/gui/component";
+import { errorModal } from "@nextgisweb/gui/error";
+import { useMemo, useState, useEffect } from "react";
+import i18n from "@nextgisweb/pyramid/i18n!";
+
+const srsListToOptions = (srsList) => {
+    return srsList.map((srs) => {
+        return {
+            label: srs.display_name,
+            value: srs.id,
+        };
+    });
+};
+
+const bandListToOptions = (bandList) => {
+    return bandList.map((band, idx) => {
+        return {
+            label:
+                i18n.gettext("Band") +
+                " " +
+                (idx + 1) +
+                (band !== "Undefined" ? " (" + band + ")" : ""),
+            value: idx + 1,
+        };
+    });
+};
+
+export function ExportForm({ id }) {
+    const [status, setStatus] = useState("loading");
+    const [srsOptions, setSrsOptions] = useState([]);
+    const [bandOptions, setBandOptions] = useState([]);
+    const [defaultSrs, setDefaultSrs] = useState();
+    const form = useForm()[0];
+
+    async function load() {
+        try {
+            const srsInfo = await route("spatial_ref_sys.collection").get();
+            const itemInfo = await route("resource.item", id).get();
+            setSrsOptions(srsListToOptions(srsInfo));
+            setBandOptions(bandListToOptions(itemInfo.raster_layer.color_interpretation));
+            setDefaultSrs(itemInfo.raster_layer.srs.id);
+        } catch (err) {
+            errorModal(err);
+        } finally {
+            setStatus("loaded");
+        }
+    }
+
+    useEffect(() => load(), []);
+
+    const fields = useMemo(
+        () => [
+            {
+                name: "format",
+                label: i18n.gettext("Format"),
+                widget: Select,
+                choices: settings.export_formats.map((format) => ({
+                    value: format.name,
+                    label: format.display_name,
+                })),
+            },
+            {
+                name: "srs",
+                label: i18n.gettext("SRS"),
+                widget: Select,
+                choices: srsOptions,
+            },
+            {
+                name: "bands",
+                label: i18n.gettext("Bands"),
+                widget: Select,
+                mode: "multiple",
+                choices: bandOptions,
+            },
+        ],
+        [srsOptions, bandOptions]
+    );
+
+    const exportRaster = () => {
+        const fields = form.getFieldsValue();
+        window.open(
+            routeURL("resource.export", id) +
+                "?" +
+                new URLSearchParams(fields).toString()
+        );
+    };
+
+    if (status === "loading") {
+        return <LoadingWrapper />;
+    }
+
+    return (
+        <FieldsForm
+            fields={fields}
+            form={form}
+            initialValues={{
+                srs: defaultSrs,
+                bands: bandOptions.map((band) => band.value),
+                format: settings.export_formats[0].name,
+            }}
+            labelCol={{ span: 6 }}
+        >
+            <Form.Item>
+                <SaveButton onClick={exportRaster} icon={null}>
+                    {i18n.gettext("Save")}
+                </SaveButton>
+            </Form.Item>
+        </FieldsForm>
+    );
+}
diff --git a/nextgisweb/raster_layer/nodepkg/export-form/index.js b/nextgisweb/raster_layer/nodepkg/export-form/index.js
new file mode 100644
index 0000000000..9b02ac9e51
--- /dev/null
+++ b/nextgisweb/raster_layer/nodepkg/export-form/index.js
@@ -0,0 +1,3 @@
+/** @entrypoint */
+import { ExportForm } from "./ExportForm";
+export default ExportForm;
diff --git a/nextgisweb/raster_layer/nodepkg/package.json b/nextgisweb/raster_layer/nodepkg/package.json
new file mode 100644
index 0000000000..7f6c3c6ec6
--- /dev/null
+++ b/nextgisweb/raster_layer/nodepkg/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@nextgisweb/raster_layer",
+    "version": "0.0.0",
+    "type": "module"
+}
diff --git a/nextgisweb/raster_layer/template/export.mako b/nextgisweb/raster_layer/template/export.mako
deleted file mode 100644
index 29cef5bed0..0000000000
--- a/nextgisweb/raster_layer/template/export.mako
+++ /dev/null
@@ -1,17 +0,0 @@
-<%inherit file='nextgisweb:pyramid/template/base.mako' />
-
-<%def name="head()">
-    <% import json %>
-    <script type="text/javascript">
-        require([
-            "ngw-raster-layer/ExportForm",
-            "dojo/domReady!"
-        ], function (
-            ExportForm
-        ) {
-            (new ExportForm({resid: ${obj.id}})).placeAt('form').startup();
-        });
-    </script>
-</%def>
-
-<div id="form" style="width: 100%"></div>
\ No newline at end of file
diff --git a/nextgisweb/raster_layer/view.py b/nextgisweb/raster_layer/view.py
index 9b7e556e30..2fdd8bf852 100644
--- a/nextgisweb/raster_layer/view.py
+++ b/nextgisweb/raster_layer/view.py
@@ -1,7 +1,7 @@
 from pyramid.httpexceptions import HTTPNotFound
 
 from .. import dynmenu as dm
-from ..pyramid import viewargs
+from ..gui import REACT_RENDERER
 from ..resource import Widget, Resource
 
 from .model import RasterLayer
@@ -14,15 +14,25 @@ class RasterLayerWidget(Widget):
     amdmod = 'ngw-raster-layer/Widget'
 
 
-@viewargs(renderer='nextgisweb:raster_layer/template/export.mako')
 def export(request):
     if not request.context.has_export_permission(request.user):
         raise HTTPNotFound()
-    return dict(obj=request.context, title=_("Save as"), maxheight=True)
+    return dict(
+        obj=request.context,
+        title=_("Save as"),
+        props=dict(id=request.context.id),
+        entrypoint="@nextgisweb/raster_layer/export-form",
+        maxheight=True,
+    )
 
 
 def setup_pyramid(comp, config):
-    config.add_view(export, route_name='resource.export.page', context=RasterLayer)
+    config.add_view(
+        export,
+        route_name='resource.export.page',
+        context=RasterLayer,
+        renderer=REACT_RENDERER,
+    )
 
     # Layer menu extension
     class LayerMenuExt(dm.DynItem):