Edit, Resize, and Filter any images for Free

The Filerobot Image Editor is the easiest way to integrate an on-the-shelf and easy-to-use image editor in your web application, for free. Integrated with few lines of code, look forward to effortless image transformations! Your users can resize, crop, rotate, and add various filters to any image - all from within their browser!

View on GitHub

Test it out below

Images

Tabs

Adjust

Finetune

Watermark

Draw

Resize

Mode

Highlights of the Filerobot Image Editor

Crop & resize effortlessly

Cropping and resizing has never been easier. Adjust the framing, size, and focus point of your image for optimal impact on delivery.

Add watermark easily

Want to protect your images? Place a discrete logo, an image, or a simple text line as a watermark. Placement and orientation are up to you.

Annotate seamlessly

Enrich and collaborate directly on your media to keep track of changes and ideas in one place.

Ready to get started?

The implementation example allows you to edit an image and instantly download the result. For more integration options, head over to the documentation the documentation ( here ).

JS version

React version

CDN version

Copy


            import FilerobotImageEditor from 'filerobot-image-editor';

            const { TABS, TOOLS } = FilerobotImageEditor;
            const config = {
              source: 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg',
              onSave: (editedImageObject, designState) => console.log('saved', editedImageObject, designState),
              annotationsCommon: {
                fill: '#ff0000'
              },
              Text: { text: 'Filerobot...' },
              Rotate: { angle: 90, componentType: 'slider' },
              tabsIds: [TABS.ADJUST,TABS.ANNOTATE,TABS.WATERMARK], // or ['Adjust', 'Annotate', 'Watermark']
              defaultTabId: TABS.ANNOTATE, // or 'Annotate'
              defaultToolId: TOOLS.TEXT, // or 'Text'
            };

            // Assuming we have a div with id="editor_container"
            const filerobotImageEditor = new FilerobotImageEditor(
              document.querySelector('#editor_container'),
              config
            );

            filerobotImageEditor.render({
              onClose: (closingReason) => {
                console.log('Closing reason', closingReason);
                filerobotImageEditor.terminate();
              }
            });

Copy


          import React, { useState } from 'react';
          import FilerobotImageEditor, { TABS, TOOLS} from 'react-filerobot-image-editor';

          function App() {
            const [isImgEditorShown, setIsImgEditorShown] = useState(false);

            const openImgEditor = () => {
              setIsImgEditorShown(true);
            };

            const closeImgEditor  = () => {
              setIsImgEditorShown(false);
            };

            return (
              <div>
               <button onClick={openImgEditor}>Open Filerobot image editor</button>
                      {isImgEditorShown && (
                      <FilerobotImageEditor
                          source="https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg"
                          onSave={(editedImageObject, designState) => console.log('saved', editedImageObject, designState)}
                          onClose={closeImgEditor}
                          annotationsCommon={{
                            fill: '#ff0000'
                          }}
                          Text={{ text: 'Filerobot...' }}
                          Rotate={{ angle: 90, componentType: 'slider' }}
                          tabsIds={[TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK]} // or {['Adjust', 'Annotate', 'Watermark']}
                          defaultTabId={TABS.ANNOTATE} // or 'Annotate'
                          defaultToolId={TOOLS.TEXT} // or 'Text'
                        />
                      )}
                </div>
            );
          }

Copy


           //after importing the plugin/library from CDN
            const config = {
              source: 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg',
              onSave: (editedImageObject, designState) => console.log('saved', editedImageObject, designState),
              annotationsCommon: {
                fill: '#ff0000'
              },
              Text: { text: 'Filerobot...' },
              Rotate: { angle: 90, componentType: 'slider' },
              tabsIds: [window.FilerobotImageEditor.TABS.ADJUST,window.FilerobotImageEditor.TABS.ANNOTATE,window.FilerobotImageEditor.TABS.WATERMARK], // or ['Adjust', 'Annotate', 'Watermark']
              defaultTabId: window.FilerobotImageEditor.TABS.ANNOTATE, // or 'Annotate'
              defaultToolId: window.FilerobotImageEditor.TOOLS.TEXT, // or 'Text'
            };

            // Assuming we have a div with id="editor_container"
            const filerobotImageEditor = new window.FilerobotImageEditor(
              document.querySelector('#editor_container'),
              config
            );

            window.FilerobotImageEditor.render({
              onClose: (closingReason) => {
                console.log('Closing reason', closingReason);
                window.FilerobotImageEditor.terminate();
              }
            });

Bridges/Adapters

Ellipse React

Ellipse Vanilla JS

Ellipse Angular

Ellipse Vue

Ellipse react-native

Legend:

Ellipse completed features

half-circle-img in progress features

Ellipse to do features

Explore Documentation

Any questions?

Submit GitHub issue

Edit, Resize, and Filter any images for Free

Images

Tabs

Mode

Crop & resize effortlessly

Add watermark easily

Annotate seamlessly

Ready to get started?

Bridges/Adapters

Any questions?

Info

Filerobot UI Family