> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trydailybread.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating and Editing Recipes

> Scale recipes, track costs, and produce consistent results

export const MediaToggle = ({mobile, desktop, isVideo = false, alt = ''}) => {
  const [view, setView] = useState(typeof window !== 'undefined' && window.innerWidth >= 640 ? 'desktop' : 'mobile');
  useEffect(() => {
    function handleResize() {
      setView(window.innerWidth >= 640 ? 'desktop' : 'mobile');
    }
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  const buttonBaseClasses = "rounded-xl flex items-center px-3 text-gray-700 dark:text-gray-300 py-1.5 border border-gray-200 dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5";
  const iconClasses = "inline-flex items-center h-5 w-5";
  const videoClasses = "rounded-lg border border-gray-200";
  return <div className="mt-6">
      <div className="flex mb-4">
        <button onClick={() => setView('mobile')} className={`${buttonBaseClasses} ${view === 'mobile' ? 'hidden' : ''}`}>
          <span className={`${iconClasses}`}>
            <Icon icon="mobile" iconType="solid" />
          </span>
          <span className="text-sm">Show mobile example</span>
        </button>
        <button onClick={() => setView('desktop')} className={`${buttonBaseClasses} ${view === 'desktop' ? 'hidden' : ''}`}>
          <span className={`${iconClasses} mr-1`}>
              <Icon icon="desktop" iconType="solid" />
          </span>
          <span className="text-sm">Show desktop example</span>
        </button>
      </div>
      {isVideo ? <div>
          <div className={`flex justify-center ${view === 'desktop' ? 'hidden' : ''}`}>
            <video autoPlay muted loop playsInline className={`mobile-video mint-max-h-[32rem] rounded-lg m-0 ${videoClasses}`} src={mobile} preload="none"></video>
          </div>
          <div className={`${videoClasses} ${view === 'mobile' ? 'hidden' : ''}`}>
            <video autoPlay muted loop playsInline className="desktop-video rounded-lg m-0 max-h-[32rem]" src={desktop} preload="none"></video>
          </div>
      </div> : <img src={view === 'mobile' ? mobile : desktop} alt={alt} className="w-auto rounded-lg border border-gray-200 max-h-[32rem] object-cover m-auto" />}
    </div>;
};

All of your recipes are stored in the "Recipes" page. You can [view all of your recipes](/recipes/using-recipes#viewing-recipes) from this summary
view.

## Default Recipes

When you open up Dailybread for the first time, you will see some default recipes. These are here as placeholders to let you know how our recipe
management system works. You can delete them, or you can use them as a starting point for your own recipes.

## Creating a Recipe

To create a new recipe, click on the "Create Recipe" button on the "Recipes" page.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/click-new-recipe-button-mobile.mp4" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/click-new-recipe-button.mp4" alt="clicking the new recipe button" isVideo={true} />

### Adding the Recipe Details

Begin by adding the recipe name, description, and yield. The yield is the number of servings the recipe produces. This is important for scaling
the recipe up or down - and for use with [sub-recipes](#adding-recipes-as-ingredients). You can also add a photo of the finished dish, which will be displayed on the
recipe page when someone is using it.

Truly, we can't recommend adding a photo enough. It helps your team know what the finished product should look like, and it helps you easily
recognize recipes that you've created.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/create-recipe-metadata-mobile.mp4" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/create-recipe-metadata.mp4" alt="adding recipe metadata" isVideo={true} />

### Adding Ingredients

Next, you'll want to add your ingredients to the recipe. You can add ingredients that are stored in your inventory, or add recipes as ingredients.
If you do not have any inventory items added yet, make sure to start by [adding those to Dailybread](/inventory/adding-items) first. Your inventory
and their associated costs, measurements, conversions, and quantities are the building blocks of your recipes.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/add-recipe-ingredient-mobile.mp4" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/add-recipe-ingredient.mp4" alt="adding a recipe ingredient" isVideo={true} />

#### Adding Recipes as Ingredients

You can also add recipes as ingredients. Recipes added to other recipes (aka, sub-recipes) are a great way to keep track of things you make
in-house, such as sauces, dressings or syrups. Simply create the recipe, and in the ingredient list choose the "Recipe" ingredient type from the
dropdown.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/images/recipes/recipe-option-mobile.png" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/images/recipes/recipe-option.png" alt="recipe ingredient type dropdown" />

### Calculating Costs

This is totally automated! There's nothing you need to do other than create your recipe.  Of course, you'll need to ensure the costs of your
[inventory items](/inventory/overview) are accurate. Dailybread takes your inventory prices and converts them into recipe costs, taking in to account
the amount you have input per-ingredient.  You'll get live feedback while you tweak your recipe ingredients - allowing you to see what kind of
financial impact each change has for your recipes.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/update-recipe-ingredient-costs-mobile.mp4" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/update-recipe-ingredient-costs.mp4" alt="updating recipe ingredient costs" isVideo={true} />

#### Viewing Costs on the Recipe List Table

You can also see the cost of your recipe on the recipe list table. This is a great way to get a quick overview of your recipes and their costs,
allowing you to sort and filter by cost.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/recipe-list-table-cost-mobile.mp4" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/recipe-list-table-cost.mp4" alt="recipe list table cost" isVideo={true} />

### Adding Recipe Steps

In order to build out your recipe, you need to add steps. Steps are the most crucial part of your recipe!  They allow you to break down all the
complexity of your recipe into simple, easy to follow instructions. You can add as many steps as you want, and you can also add photos or videos to
each step to provide extra context for particularly tricky steps. Further, you can even add [individual recipe ingredient to a step](#adding-ingredients-to-steps).

However, you can always add all the details in later once you've gotten feedback from your team. To get started with a step, all you need is a
title and a description.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/add-recipe-step-mobile.mp4" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/videos/recipes/add-recipe-step.mp4" alt="adding a recipe step" isVideo={true} />

#### Adding Ingredients to Steps

Often, recipe steps include phrases like "take half the flour" or "take the flour". But this frequently prompts the question: what are you referring
to?

To avoid this confusion and ensure clarity while someone is following your recipe: add a step ingredient. Step ingredients let you to specify which
ingredient is being used in the step and how much of it is being used. This is a great way to ensure that your team knows exactly what you mean when
you say "take the flour".

You will be given a summary of all the ingredients not referenced in steps - this helps you to understand which items are considered "whole":

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/images/recipes/step-ingredient-summary-mobile.png" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/images/recipes/step-ingredient-summary.png" alt="adding a recipe step ingredient" />

Once you add a step ingredient, it will be displayed in the step. The summary will update to show you which ingredients are only partially referenced,
so you can make sure to add the entirety of the ingredient to additional steps.

<MediaToggle mobile="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/images/recipes/step-ingredient-summary-missing-warning-mobile.png" desktop="https://dailybread.nyc3.cdn.digitaloceanspaces.com/production/public/docs/images/recipes/step-ingredient-summary-missing-warning.png" alt="recipe step ingredient summary missing warning" />
