Chromium Embedded Framework documentation
This page explains how to create a simple application using CEF3.
Contents
This tutorial explains how to create a simple application using CEF3 and the CEF C++ API. It references the cefsimple example project. For complete CEF3 usage information visit the General Usage page.
Prefer hands-on learning? The Hands-On Tutorial teaches CEF development by modifying cefsimple step-by-step. You’ll progressively add features like JavaScript integration, custom popup windows, and multi-browser support. This architectural tutorial provides reference documentation, while the hands-on tutorial provides practical learning-by-doing.
Using the C API? If you need a pure C implementation (no C++), see cefsimple_capi and the Using the C API page instead. The architectural concepts in this tutorial apply to both APIs.
This tutorial uses CEF binary distributions. If you’re building from Chromium source, the build process is different (uses GN/Ninja instead of CMake). See the README.txt file in your checkout for source build instructions.
CEF provides a sample project that makes it really easy to get started with CEF development using binary distributions. Simply browse over to the cef-project website and follow the step-by-step instructions. The source files linked from this tutorial are for the current CEF3 master branch and may differ slightly from the versions that are downloaded by cef-project.
The cefsimple application loads google.com by default but you can change it to load a custom URL instead. The easiest way to load a different URL is via the command-line.
# Load the local file "c:\example\example.html"
cefsimple.exe --url=file://c:/example/example.html
You can also edit the source code in cefsimple/simple_app.cc and recompile the application to load your custom URL by default.
// Load the local file "c:\example\example.html"
…
if (url.empty())
url = "file://c:/example/example.html";
…
All CEF applications have the following primary components:
The CEF dynamic library, support files and resources will be the same for every CEF-based application. They are included in the Debug/Release or Resources directory of the binary distribution. See the README.txt file included in the binary distribution for details on which of these files are required and which can be safely left out. See below for a detailed description of the required application layout on each platform.
The below list summarizes the items of primary importance for this tutorial:
--use-alloy-style flag).--use-native flag), and off-screen rendering (OSR).Read the General Usage page for complete discussion of the above points.
The cefsimple application initializes CEF and creates a single popup browser window. The application terminates when all browser windows have been closed. Program flow is as follows:
Your binary distribution may include newer versions of the below files. However, the general concepts remain unchanged.
Execution begins in the browser process entry point function. This function is responsible for initializing CEF and any OS-related objects. For example, it installs X11 error handlers on Linux and allocates the necessary Cocoa objects on macOS. macOS has a separate entry point function for helper processes.
SimpleApp is responsible for handling process-level callbacks. It exposes some interfaces/methods that are shared by multiple processes and some that are only called in a particular process. The CefBrowserProcessHandler interface, for example, is only called in the browser process. There’s a separate CefRenderProcessHandler interface (not shown in this example) that is only called in the render process. Note that GetBrowserProcessHandler() must return |this| because SimpleApp implements both CefApp and CefBrowserProcessHandler. See the General Usage page or API header files for additional information on CefApp and related interfaces.
SimpleHandler is responsible for handling browser-level callbacks. These callbacks are executed in the browser process. In this example we use the same CefClient instance for all browsers, but your application can use different CefClient instances as appropriate. See the General Usage page or API header files for additional information on CefClient and related interfaces.
Build steps vary depending on the platform. Explore the CMake files included with the binary distribution for a complete understanding of all required steps. The build steps common to all platforms can generally be summarized as follows:
The resulting directory structure looks like this for 2526 branch:
Application/
cefsimple.exe <= cefsimple application executable
libcef.dll <= main CEF library
icudtl.dat <= unicode support data
libEGL.dll, libGLESv2.dll, ... <= accelerated compositing support libraries
cef.pak, devtools_resources.pak, ... <= non-localized resources and strings
natives_blob.bin, snapshot_blob.bin <= V8 initial snapshot
locales/
en-US.pak, ... <= locale-specific resources and strings
The resulting directory structure looks like this for 2526 branch:
Application/
cefsimple <= cefsimple application executable
chrome-sandbox <= sandbox support binary
libcef.so <= main CEF library
icudtl.dat <= unicode support data
cef.pak, devtools_resources.pak, ... <= non-localized resources and strings
natives_blob.bin, snapshot_blob.bin <= V8 initial snapshot
locales/
en-US.pak, ... <= locale-specific resources and strings
files/
binding.html, ... <= cefclient application resources
The resulting directory structure looks like this for 2526 branch:
cefsimple.app/
Contents/
Frameworks/
Chromium Embedded Framework.framework/
Chromium Embedded Framework <= main application library
Resources/
cef.pak, devtools_resources.pak, ... <= non-localized resources and strings
icudtl.dat <= unicode support data
natives_blob.bin, snapshot_blob.bin <= V8 initial snapshot
en.lproj/, ... <= locale-specific resources and strings
cefsimple Helper.app/
Contents/
Info.plist
MacOS/
cefsimple Helper <= helper executable
Pkginfo
Info.plist
MacOS/
cefsimple <= cefsimple application executable
Pkginfo
Resources/
cefsimple.icns, ... <= cefsimple application resources
Now that you understand the basics of CEF application structure, here are recommended next steps:
Want help implementing additional features in your CEF application? The CEF project includes instructions for using Claude Code to assist with tasks like adding custom URL schemes, JavaScript-to-C++ communication, request interception, and more.
See the CEF Client Development Guide for step-by-step instructions.