<p>In developing resource-constrained Internet of Things applications, the focus on design and modeling supports embedded programming. Taking into account the specificities of the application and the limitations of resource-constrained devices in the design and modeling process will streamline the development process. Traditional solutions aimed at resource-constrained devices often focus on programming at the expense of design and modeling, compromising systems with potential flaws and leading to rework. This paper tackles the challenge of developing programs for resource-constrained IoT devices by proposing a statechart-based design and modeling approach. Statecharts offer a powerful and accessible solution for event-driven IoT applications due to their compact visual representation of reactive systems. The intuitive visualization of state transitions and event-driven logic aligns seamlessly with the core event-driven behaviors of IoT devices. Statechart4IoT, as the implementation of this approach, offers a compelling solution for designing, modeling, and pre-implementation analysis of resource-constrained IoT applications. Leveraging the statechart formalism oriented to resource-constrained embedded environments, this framework provides an intuitive web-based environment that enables developers to design and model IoT applications in an interactive visual programming manner. Finally, the framework generates binary-based statechart scripts with small footprints optimized for deployment to resource-constrained devices. To fully realize the capabilities of the proposed approach, a statechart interpreter solution can be implemented as middleware on devices. This will enable the execution of deployed scripts, which ultimately complete the computational behavior of statecharts. This paper evaluates our approach with such a statechart middleware on two distinct operating systems and three hardware platforms. The results obtained indicate the feasibility of the proposed approach.</p>