Getting started

Starting to create a mock API is very simple. You can sign in with your Google or Github account. We also give you the option to sign in as a guest, but keep in mind that your data won't be permanent. Guest sign-in is intended for you to test the tool without registering, though we're sure you'll register once you see how much you like it.

Once you're signed in, you'll be on the main screen. Mockfly operates through projects. You can have as many projects as you want and can invite your colleagues to collaborate with you.

The first thing we need to do is create a project. You will see a screen similar to this:

If we click on the "Create one" button, a modal will pop up where we just have to fill in a text field indicating the name for our project. In this example, we've named it "My first project".

Once we hit the "Create" button, the project we just made will appear.

If you want to create more projects, you can click on the button in the top right corner with the "+" symbol. As mentioned, you can have as many projects as you need and invite as many friends as you want.

Project Options

As you can see, a project has several options and different pieces of information:

1. Project name:

This is the name we've given to the project. If you don't like it, you can change it anytime you want :)

2. Namespace:

The namespace is your project's "identifier". You'll use it for HTTP requests. Your mock API's HTTP requests should go to https://api.mockfly.dev/mocks/{namespace}. This namespace can be changed, and we'll see how later on.

3. Users:

A list of users in the project will appear. This list shows the users who can add, edit, and delete endpoints. The crown icon by a user indicates that they are the project administrator, who has special privileges such as editing the project name, editing the namespace, and deleting the project.

4. Invite users:

You can invite your friends to the project so they can collaborate with you in creating a mock API. To invite friends, press the "+" button within the project, and a modal will appear. In this modal, enter your friend's email or Github @handle, e.g., @mockflydev. However, note that your friends must be previously registered on Mockfly to invite them.

5. Edit project:

In this option, you can edit the project's name. As we mentioned earlier, only the project admin can do this.

6. Edit namespace:

You can edit your project's namespace to make it more user-friendly. Instead of a URL like "https://api.mockfly.dev/mocks/e2339048-8e94-4991-b1a1-5c130c548371", you can change it to "https://api.mockfly.dev/mocks/users" for easier recall when pointing your project to consume the mock API.

7. Show API key:

This option reveals the API key for our project. This API key allows us, for example, to use the chrome extension to add endpoints more quickly.

8. Enter the project:

To start creating our first endpoints, click on the project card, and it will take you to a screen where you can select: "Endpoints".

Endpoints Page

Create an Endpoint

To create an endpoint, simply click on the button in the bottom left corner:

This will open a modal asking for the endpoint path, e.g., /users and the HTTP method. As an example, let's create an endpoint with the path /users and a GET method. Once everything is ready, click the "Create" button to make the endpoint.

Editing an Endpoint

When you want to edit an endpoint, you can adjust various parts of it:

1. Method: You can edit the HTTP method of our endpoint. Choose from the following HTTP verbs: GET, PUT, POST, PATCH, DELETE, OPTIONS. The change is made automatically.
2. Path: Change the endpoint path. You can even add dynamic parameters using this format, for example: /users/:id.
3. Delay: Set a delay in milliseconds. This will delay the API's response by the time set.
4. Response: For a single endpoint, we can have multiple responses. This selector lets you toggle between them. However, Mockfly will always return the one set as default.
5. Status code: Specify the status code with which you want the mock API to respond. This is handy for testing various scenarios.
6. Add response: Create another response to return a different status code or body.
7. Delete response: Delete the currently viewed response. However, there always needs to be at least one.
8. Set response as default: By pressing this button, the displayed response is set as default, which means it's the one Mockfly will return.

Editing body

Now that we have an endpoint named /users, we can edit the body using the integrated code editor. For this test, I'll edit the body with the following JSON:

[{"id": 1, "name": "Sergio"}, { "id": 2, "name": "test" }]

Look in the top left corner, and you'll see a saving indicator. When it reads "Saved", it means all data has been saved. Typically, it's fast, and you may not even notice you're editing an endpoint. ;)

Test my endpoint

Once my endpoint is set up with a decent body, I can test it. I have several options. The first, available only for GET requests, is the "Try it" button. This will open a new browser tab and show the response of the created endpoint. Note, this only works if the URL doesn't have dynamic parameters, like /users/:id.

Another option is to click the button on the left with the link icon, which will copy the base URL of your project to the clipboard. Then, add the path of your endpoint to this base. For example: https://api.mockfy.dev/mocks/e2339048-8e94-4991-b1a1-5c130c548371/users.